【问题标题】:Elaborate css for a background image gradient为背景图像渐变精心设计的 css
【发布时间】:2010-01-28 21:46:21
【问题描述】:

伙计们。这可能更像是一个设计问题,但我想我会试一试,以防有人有一些我可以使用的高超 CSS 技术。如果没有,我会为反对投票和拒绝的冲击做好准备!

您可以看到这里的徽标支架有一个向右渐变的背景图像,并且显然是半透明的。我的客户正在寻找顶部和右侧的渐变。关于如何实现这一点的任何想法?

alt text http://www.linkhostmedia.com/blog/wp-content/uploads/2010/01/Screen-shot-2010-01-28-at-4.31.45-PM.png

提前致谢。

【问题讨论】:

    标签: css image gradient


    【解决方案1】:

    最明显的解决方案是使用部分透明的图像作为容器 div 的背景图像。

    #container_div {background: transparent url(path/to/image.png) bottom right no-repeat; }
    

    【讨论】:

    • 您看到我面临的问题了吧?在顶部的左侧,向上淡出没什么大不了的。有几种方法可以解决这个问题。但是当你靠近右边时,把它和右边混合起来就变得很棘手。除了 CSS,我什至不知道如何从设计的角度来实现这一点。
    • 嗯,不;我不认为我这样做。从您的评论中,我认为您想要一个从右下角开始的渐变?只需创建具有 alpha 通道透明度的图像并使用 css 定位它。我错过了什么吗?这似乎并不难... =/
    • @jeerose:好吧,从图形的角度来看,您将不得不在左侧制作一个不透明蒙版->右侧淡入淡出。这实际上很容易在 Fireworks、Photoshop 或 Illustrator 中完成。现在在我看来,这个东西可以是静态宽度,也可能是静态高度,所以我不确定是什么给你带来了问题……添加渐变是否会禁止在你需要的方向上重复背景?跨度>
    • 在 GIMP 中也很简单,物有所值。
    • @prodigistalson,我不知道为什么我之前没有想到这一点,但你的“不透明蒙版”为我触发了它。我从上到下对现有的渐变应用了渐变蒙版。像魅力一样工作。谢谢!
    猜你喜欢
    • 1970-01-01
    • 2011-09-09
    • 1970-01-01
    • 1970-01-01
    • 2012-12-29
    • 1970-01-01
    • 2020-12-29
    • 2013-05-11
    • 1970-01-01
    相关资源
    最近更新 更多