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

Question

我正在尝试使用CSS3，我正在尽力将Photoshop comp转换为HTML。

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

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

我猜测如果我不能在一个元素中执行它，我会在我的背景元素中放置一个容器，浮动它并使宽度和高度填充背景元素，但这看起来非常混乱。

任何建议表示赞赏！谢谢你的时间！

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

代码看起来像这样：

<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中通过“堆叠”背景网址顶部的渐变来做到这一点？

是：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。

这是你的意思吗？

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对事物进行分层，以便在两个背景上都可以看到实际的文字内容。