如何在同一元素上组合背景图像和 CSS3 渐变？

如何使用 CSS3 渐变作为background-color然后应用background-image来应用某种透明纹理？

答案

多个背景！

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

这两行是任何不做渐变的浏览器的后备。请参阅下面的 IE <9 堆叠图像的注意事项。

第 1 行设置平坦的背景颜色。
第 2 行设置背景图像后备。

最后一行为可以处理它们的浏览器设置背景图像和渐变。

第 3 行适用于所有相对现代的浏览器。

几乎所有当前浏览器都支持多个背景图像和 CSS 背景。有关浏览器支持，请参阅http://caniuse.com/#feat=css-gradients 。有关您不需要多个浏览器前缀的好帖子，请参阅http://codepen.io/thebabydino/full/pjxVWp/

层堆栈

应该注意的是，第一个定义的图像将位于堆栈的最顶层。在这种情况下，图像位于渐变的 TOP 上。

有关背景分层的更多信息，请参见http://www.w3.org/TR/css3-background/#layering 。

仅堆叠图像（声明中没有渐变）对于 IE <9

IE9 及以上版本可以以相同的方式堆叠图像。您可以使用它为 ie9 创建渐变图像，但我个人不会。但是，在仅使用图像时要注意，即 < 9 将忽略回退语句而不显示任何图像。包含渐变时不会发生这种情况。在这种情况下，为了使用单个后备图像，我建议使用 Paul Irish 的精彩条件 HTML 元素以及您的后备代码：

.lte9 #target{ background-image: url("IMAGE_URL"); }

背景位置，尺码等

适用于单个图像的其他属性也可以用逗号分隔。如果仅提供 1 个值，则将应用于包括渐变的所有堆叠图像。 background-size: 40px;将图像和渐变限制为 40px 的高度和宽度。但是使用background-size: 40px, cover;将使图像为 40px，渐变将覆盖元素。要仅对一个图像应用设置，请为另一个图像设置默认值： background-position: 50%, 0 0;或者对于支持它的浏览器使用initial ： background-position: 50%, initial;

您也可以使用背景速记，但这会删除后备颜色和图像。

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

这同样适用于背景位置，背景重复等。

如果您还想为图像设置背景位置 ，则可以使用此方法：

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

或者你也可以创建一个 LESS mixin（bootstrap 风格）：

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

要意识到的是，第一个定义的背景图像位于堆栈的最顶层。最后定义的图像将位于最底部。这意味着，要在图像后面有背景渐变，您需要：

body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

您还可以定义图像的背景位置和背景大小。我整理了一篇关于CSS3 渐变可以做的一些有趣事情的博客文章