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

Question

如何为我使用CSS3渐变background-color，然后应用background-image来应用某种透光的纹理？

Answer 1

多个背景！

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上。

有关背景分层的更多信息，。

仅堆叠图像（声明中没有渐变）对于IE<9IE9及更高版本可以以相同方式堆叠图像。您可以使用它为ie9创建一个渐变图像，尽管我个人不会。但是要注意的是，仅使用图像时，即<9将忽略后备语句，并且不显示任何图像。当包含渐变时，不会发生这种情况。在这种情况下，要使用单个后备图像，建议您将PaulIrish的出色的Conditional 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);
}

背景位置，背景重复等也是如此。