2

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

我有多个不同高度的背景实例（使用背景 url），我想使用rgba 渐变（使用 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+ */
}
4

3 回答 3

2

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

是：CSS3 允许多个背景图片，以逗号分隔。

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

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+ */
}

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

于 2013-07-24T13:24:03.327 回答
0

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 具有较低的不透明度。

你是这个意思吗？

于 2013-07-24T12:12:20.753 回答
0

使用 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：请参见此处

希望有帮助。

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

于 2013-07-24T13:00:05.997 回答