5

我在网上有以下代码：

  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));

哪个工作正常。

现在我不是 CSS 专家，但我注意到所有这些都是前缀。添加无前缀版本是否明智？那会是什么？

4

4 回答 4

1

添加无前缀版本是否明智？

是的，您应该始终提供您使用的任何带前缀的 CSS 代码的无前缀版本。

那会是什么？

在渐变的情况下，您拥有的版本与标准相同；只需删除前缀。

但请注意，还有一个用于渐变的 webkit 语法的早期变体，如果您想支持较旧的 webkit 浏览器，您可能还需要指定它。

您还应该包含纯色背景作为不支持的浏览器的后备。

如果您对这些事情有任何疑问，请咨询CanIUse或MDN等网站。

如果你想获得真正的跨浏览器兼容，你可能还注意到 IE9 和更早版本根本不支持 CSS 渐变（有或没有前缀）。纯色后备将起作用，但是如果您想要渐变，则可以使用其他解决方案（我的首选选项通常是CSS3Pie，但如果您愿意，也可以使用纯 CSS 选项；但它们并不好）。

于 2013-06-10T13:08:52.430 回答
0

无前缀的 W3C 标准名称是linear-gradient.

于 2013-06-10T12:23:00.943 回答
0

我一直在使用Ultimate CSS Gradient Generator。它工作得很好。

您的示例将导致：

background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,0) 100%);
于 2013-06-10T12:33:49.763 回答
0

为了将来证明线性渐变，只需在现有代码的末尾添加：

background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));

像这样，当浏览器删除前缀时，它仍然可以使用通用代码。

于 2013-06-10T13:02:03.020 回答