如何使用 CSS 在背景上应用渐变？

Question

我正在使用 CSS3，我正在尽我最大的努力将 Photoshop comp 转换为 HTML。

我有多个不同高度的背景实例（使用背景 url），我想使用 rgba gradients（使用 alpha 通道）在该背景之上应用渐变。我显然希望远离像素中内置渐变的静态背景图像。

有没有办法在 CSS 中通过“堆叠”背景 url 顶部的渐变来做到这一点？

我猜如果我不能在一个元素中做到这一点，我会在我的背景元素中放置一个容器，使其浮动并让宽度和高度填充背景元素，但这看起来很混乱。

感谢任何建议！感谢您的宝贵时间！

这里有两个相同背景和渐变但高度不同的示例：导航和页脚

代码如下所示：

<nav>
 <ul>
  <li>Menu item 1</li>
  <li>Menu item 2</li>
  <li>Menu item 3</li>
  <li>Menu item 4</li>
 </ul>
</nav>

风格：

nav {
  background : url('repeating-background-image.png') repeat;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /*    Chrome10+,Safari5.1+ */
}

Answer 1

有没有办法在 CSS 中通过“堆叠”背景 url 顶部的渐变来做到这一点？

是：CSS3 允许multiple background images，用逗号分隔。

由于渐变的行为类似于图像，您可以将它们与背景图像结合使用：

div {
    width: 400px;
    height: 400px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /*    Chrome10+,Safari5.1+ */
}

• http://jsfiddle.net/kReNL/

这在 IE 8 或更早版本中不起作用，但 CSS 渐变也不起作用。 （尽管 Microsoft 的 filter 属性适用于 IE 8 及更早版本，并且确实支持具有 alpha 透明度的渐变 - 请参阅 Can you use rgba colours in gradients produced with Internet Explorer’s filter property?）。

Answer 2

http://jsfiddle.net/8gvZM/

background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */

并在其上方创建一个 div，背景 url 具有较低的不透明度。

你是这个意思吗？

Answer 3

使用 CSS :before 在原始元素之上创建一个附加（伪）元素。

原始元素将具有图像背景，:after 元素将具有渐变，并具有不透明度设置，以便原始元素通过它显示。

div {
    width: (whatever size you want to set it to)
    height: (ditto)
    position:relative;
    background:url('mainImage.jpg');
    z-index:5;
}

div::before {
    content:'';
    width: .... (same as main div)
    height: .... (same as main div)
    position:absolute;
    z-index:-3;
    display:block;
    opacity:0.5;
    background: linear-gradient(to bottom, #8fc400 0%,#ff0000 100%); /* plus add the other browser-specific gradient styles too */
}

我已经做了一个 jsFiddle 给你演示：see here

希望对您有所帮助。

[编辑]根据 OP 的评论稍微更改了上面答案的详细信息。现在使用:before 而不是:after，并使用z-index 对内容进行分层，以便在两个背景上都可以看到实际的文本内容。