Question

是否可以在1 div标签中同时应用背景图像和背景渐变颜色？（CSS3及以上版本可以）

我有以下代码，渐变背景颜色确实显示，但背景图像不显示我错过了什么？

background: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#2e2e2e));
background-image:url('/uploads/image1.jpg') no-repeat;
-webkit-background-size: 33px 33px;
border-bottom:1px solid #636363;
height:39px;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius: 10px;

谢谢，
三通

Answer 1

渐变属性是背景模块的一部分，因此您需要指定背景图像，而不仅仅是背景。

您也希望使用背景大小以确保背景不是全高。

举一个简单的例子，请查看www.Dartrite.co.uk。

Answer 2

渐变是可用于代替图像的值。对于背景，渐变是background-image属性的值。因此，您不能同时拥有图像和渐变（尽管您可以先指定图像，然后使用支持渐变的浏览器的渐变声明覆盖它）。

Answer 3

使用：after＆amp; ：在伪选择器之前，您最多可以有3个不同的背景，分层：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/。希望这有帮助！

Answer 4

是的，您可以使用带渐变的背景图像，如下所示：

.example {
    height: 200px;
    width: 200px;
    background: url("http://i.stack.imgur.com/vNQ2g.png?s=50&g=1") no-repeat scroll center center, linear-gradient(45deg, #000, #F00) repeat scroll 0% 0% transparent;
}

<div class="example"></div>

几乎只使用background速记属性和两个逗号分隔值。

Answer 5

它的工作正常检查

＆＃13;

.example {
    background: url("http://i.stack.imgur.com/vNQ2g.png?s=50&g=1") no-repeat scroll center center, transparent linear-gradient(45deg, #000, #f00) repeat scroll 0 0;
border-bottom: 1px solid #636363;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
height: 200px;
width: 200px;
}

＆＃13;

<div class="example"></div>

＆＃13;

背景图象和背景在1个标记

5 个答案: