哪个CSS属性对于渐变“背景”或“背景图像”是正确的

问题描述：

哪个是用于CSS渐变的正确属性？ “背景”或“背景图像”，如下所示。他们都在5个浏览器中工作（在我的版本中）。我见过多个教程，一些使用“背景”，另一些使用“背景图像”，但没有一个讨论为什么一种方法比另一种更好。哪个CSS属性对于渐变“背景”或“背景图像”是正确的

他们都不在验证http://jigsaw.w3.org/css-validator/#validate_by_input

.gradient { 
    background-color: #1a82f7; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); 
    background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
    background: -moz-linear-gradient(top, #2F2727, #1a82f7); 
    background: -ms-linear-gradient(top, #2F2727, #1a82f7); 
    background: -o-linear-gradient(top, #2F2727, #1a82f7); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#2F2727, endColorstr=#1a82f7); 
}

或者这一个：

.gradient { 
    background-color: #1a82f7; 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); 
    background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
    background-image: -moz-linear-gradient(top, #2F2727, #1a82f7); 
    background-image: -ms-linear-gradient(top, #2F2727, #1a82f7); 
    background-image: -o-linear-gradient(top, #2F2727, #1a82f7); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#2F2727, endColorstr=#1a82f7); 
}

属性很好（渐变是专门考虑的图像），但没有一个是有效的，因为它们都使用前缀函数。 – BoltClock 2012-08-09 20:01:21

答

我不相信使用background比使用background-image任何不同。基本上它就像background: url('image.png');和background-image: url('image.png') - 它们是一样的，它只是background是一个速记属性，允许您指定几个背景属性，如background-repeat,background-color，当然还有background-image。

所以基本上梯度应该指定为background-image，使用background没有什么不同，只是指定它的另一种方式。

至于W3C验证问题，我认为这是因为梯度“功能”都使用浏览器特定的前缀。我预计这些功能将不会正式识别，直到HTML5成为官方标识。

希望能以任何方式提供帮助。

哪个CSS属性对于渐变“背景”或“背景图像”是正确的

相关推荐