1个标签中的背景图像和背景

是否可以将背景图像和背景渐变颜色一起应用到1个div标签中？（CSS3及以上版本）1个标签中的背景图像和背景

我有下面的代码，渐变背景颜色显示，但背景图像没有。
我错过了什么？

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;

感谢，
三通

来源

2010-06-01 teepusink

参见：http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image -and-css3-gradients – nico 2010-06-01 07:02:35

我一直都在使用它，因为我非常喜欢css3。为避免任何复杂情况，我建议您只需使用css3渐变和标签。尽管付出了很大的努力，所有尝试制作完全跨浏览器兼容的多种后台解决方案都失败 – 2012-02-20 03:52:21

梯度属性是背景的模块的一部分，所以你需要指定背景图片，而不仅仅是背景。

你会想要使用背景大小，以确保背景不是全高。

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

来源

2010-06-01 07:04:10

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

来源

2010-06-03 16:45:36

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

来源

2011-06-23 19:07:56

是的，你可以使用背景图片与梯度，就像这样：

.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速记属性。

来源

2013-03-27 03:14:51 apaul

它的做工精细检查

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

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

来源

2015-11-21 10:29:39 Ram

1个标签中的背景图像和背景

回答

相关问题