0

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

他们都没有在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);
}
4

1 回答 1

3

我不相信 using与 usingbackground有什么不同background-image。基本上它就像background: url('image.png');和background-image: url('image.png')- 它们是相同的东西，只是它background是一个速记属性，允许您指定多个背景属性，例如background-repeat, background-color，当然还有background-image。

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

至于W3C验证器问题，我认为这是因为渐变“函数”都使用特定于浏览器的前缀。我希望在HTML5正式发布之前，这些功能不会被官方认可。

希望以任何方式有所帮助。

于 2012-08-09T20:03:19.987 回答