Question

哪个是用于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);
}

Answer 1

我不认为使用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属性适用于渐变“背景”或“背景图像”

1 个答案: