如何在同一元素上结合使用背景图片和CSS3渐变？

19 浏览
0 Comments

如何在同一元素上结合使用背景图片和CSS3渐变？

如何在我的 background-color 中使用CSS3渐变，然后应用一个 background-image 以应用某种轻透明纹理？

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

\n\n如果你想要为你的图片设置背景位置，那么你可以使用这个代码：

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
    }
}

。

0
0 Comments

多重背景！

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

这两行是任何不支持渐变的浏览器的备选方案。有关在IE <9中只堆叠图像的注意事项，请参见下面的说明。

  • 第一行设置了一个平面背景颜色。
  • 第二行设置了背景图像的备选项。

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

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

几乎所有当前的浏览器都支持多重背景图像和CSS背景。有关浏览器支持情况，请参见http://caniuse.com/#feat=css-gradients。有关为什么不需要多个浏览器前缀的好文章，请参见http://codepen.io/thebabydino/full/pjxVWp/

层叠

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

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

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

IE9及以上也可以以同样的方式堆叠图像。您可以使用此方法为ie9创建渐变图像，但是我个人不会这样做。但请注意，当仅使用图像时，ie <9将忽略回退语句并不显示任何图像。当包含渐变时，不会发生这种情况。在这种情况下，为了使用单个备用图像，我建议使用Paul Irish精美的Conditional HTML element以及您的回退代码：

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

背景位置、大小调整等

其他应用于单个图像的属性也可以用逗号分隔。如果只提供了一个值，则该值将应用于所有堆叠的图像，包括渐变。 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-position、background-repeat 等同样适用。

0