CSS渐变。。。意见？

我一直在设计网站很长一段时间，只使用图像渐变，对于小渐变，这似乎工作得很好，并没有增加太多的加载时间，但现在有这么多新的CSS碎片（webkit/moz/o/khtml，更不用说ie 6,7,8,9）

所以为了得到一个通用梯度，会有很多css

对于需要大量渐变的站点，我使用较少的.js使其稍微好一点，但这仅限于此

我只是想知道，如果真的有一个临界点，在图像上使用css渐变会有多大的意义

[例如，一个小的5px渐变，只使用5px图像更有意义，但像1000px渐变一样，只使用css可能更有意义]

哦，我知道有SVG，我还没有真正尝试过，但它工作得好吗

---

如有任何意见，将不胜感激。：）

我目前的方法是使用CSS3渐变（

webkit-

，

moz-

，等等），并提供旧的背景图像作为后备。考虑到当前的带宽，图像的大小并不是一个问题——即使是200px的渐变也只需要200字节左右。大部分开销来自于对图像的多个请求的延迟，这将使用CSS消除

---

使用CSS的主要好处是可以减少请求的数量。在一个页面上使用的图像越多，收益就越大。

使用图像的问题在于，您在所能做的事情上受到了更多的限制。如果要使用背景渐变，而长方体比预期的大，则渐变会提前停止或开始重复。这两种解决方案可能都不是您想要的

您可以查看有关如何在css3中获得良好效果的示例（使用实时示例代码）。对于背景渐变，可以使用以下选项：

.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}

---

总而言之：您可以通过每个支持CSS3渐变的浏览器中的单个SVG获得对渐变的支持，IE9支持的额外积分，Opera可以追溯到很久以前（最近才支持-o-前缀为CSS3渐变），它消除了由于两个webkit语法的差异而出现的问题。这两个webkit语法不仅仅是单词和数字的不同顺序或组合，它们彼此完全不兼容，而且很难规范化

如果您使用SVG作为文件的背景图像，则会出现这种情况。如果您进一步将SVG嵌入为datauri，那么您将失去对Firefox 6之前版本的支持。不过，所有版本的firefox都支持“正确”的CSS3渐变语法，因此在大多数情况下，只使用SVG数据URI plus-moz-CSS3并不是一件麻烦事

主要的技巧是，它需要进行一些调整，学习SVG内部大小->视口->CSS背景内部大小调整/平铺->以及最终修改器（如背景大小）之间的交互。这就是为什么，尽管这是一个包罗万象的问题，人们还是避免使用SVG

我没有成功的一件事是在CSS3重复梯度和基于百分比的停止之间进行规范化，同时使用SVG（支持-moz-）。问题在于，无论采用何种方式组合来产生所需的结果，其中一种方式都需要设置背景大小，以使其打破另一种方式。这是一个非常具体的用例

这是一个水平线性渐变：

<svg xmlns="http://www.w3.org/2000/svg">
  <style>stop{stop-color:#f00}</style>
  <linearGradient id="g">
    <stop stop-opacity=".4"/>
    <stop stop-opacity="0" offset="1"/>
  </linearGradient>
  <rect width="100%" height="100%" fill="url(#g)"/>
</svg>

这就是CSS3

#css3 {
                                                   background-image: -webkit-gradient(linear, 0 0, 100% 0, 
  from(0,rgba(255,0,0,0)),to(1,rgba(255,0,0,.4))); background-image: -webkit-linear-gradient(
  right, rgba(255,0,0,0),      rgba(255,0,0,.4));  background-image: -moz-linear-gradient(
  right, rgba(255,0,0,0),      rgba(255,0,0,.4));  background-image: -ms-linear-gradient(
  right, rgba(255,0,0,0),      rgba(255,0,0,.4));  background-image: -o-linear-gradient(
  right, rgba(255,0,0,0),      rgba(255,0,0,.4));  background-image:  linear-gradient(
  right, rgba(255,0,0,0),      rgba(255,0,0,.4));  filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#33ff0000", endColorstr="#00ff0000", GradientType=1);
}

下面是一个重复的对角线：

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900">
    <style>
        stop{stop-color:#fff;stop-opacity:0}
        [b]{stop-opacity:.15}
    </style>
    <linearGradient id="g" x1="1" x2="0" y2="1">
        <stop offset=".25" b=""/>
        <stop offset=".25"/>
        <stop offset=".5"/>
        <stop offset=".5" b=""/>
        <stop offset=".75" b=""/>
        <stop offset=".75"/>
    </linearGradient>
    <rect width="900" height="900" fill="url(#g)"/>
</svg>

还有它的CSS3，它不会影响IE9：

background-image: -moz-repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);
background-image: -webkit-repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);
background-image: -ms-repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);
background-image: -o-repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);
background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);

---

…或者类似的东西，我多次试图让SVG看起来与渐变相同，以隐藏Firefox我用于所有浏览器渐变的代码：

background:#0A284B；
背景：-webkit渐变（线性、左上、左下、从（#0A284B）到（#135887））；
背景：-webkit线性梯度（#0A284B，35887）；
背景：-莫兹线性梯度（顶部，#0A284B，#135887）；
背景：-ms线性梯度（#0A284B，#135887）；
背景：-o-线性梯度（#0A284B，#135887）；
背景：线性梯度（#0A284B，#135887）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#0A284B'，endColorstr='#135887'）；
缩放：1；

您需要指定一个高度或

zoom:1

以将

hasLayout

应用于元素，以便在IE中工作

---

更新：

以下是一个面向所有较少用户的较少混合（CSS）版本：

.gradient（@start，@end）{
背景：混合（开始、结束、50%）；
过滤器：~“progid:DXImageTransform.Microsoft.gradient（startColorStr=“@start~”，EndColorStr=“@end~”）；
背景：-webkit渐变（线性、左上、左下、从（@start）到（@end））；
背景：-webkit线性梯度（@start，@end）；
背景：-莫兹线性梯度（顶部，@开始，@结束）；
背景：-ms线性梯度（@start，@end）；
背景：-o-线性梯度（@start，@end）；
背景：线性梯度（@start，@end）；
缩放：1；
}

如果所有浏览器同时支持

线性渐变，那就太好了。

：-（SVG工作得很好，但代理之间存在差异：Chrome比FF做得好得多。我将渐变/不透明度与动画相结合……尝试以下方法：

.diag {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iOTAwIj48c3R5bGU+c3RvcHtzdG9wLWNvbG9yOiNmZmY7c3RvcC1vcGFjaXR5OjB9W2Jde3N0b3Atb3BhY2l0eTouMTV9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgeDE9IjEiIHgyPSIwIiB5Mj0iMSIgaWQ9ImciPjxzdG9wIG9mZnNldD0iLjI1IiBiPSIiLz48c3RvcCBvZmZzZXQ9Ii4yNSIvPjxzdG9wIG9mZnNldD0iLjUiLz48c3RvcCBvZmZzZXQ9Ii41IiBiPSIiLz48c3RvcCBvZmZzZXQ9Ii43NSIgYj0iIi8+PHN0b3Agb2Zmc2V0PSIuNzUiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iOTAwIiBmaWxsPSJ1cmwoI2cpIi8+PC9zdmc+);
    background-size: 33% auto;
}

background-image: -moz-repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);
background-image: -webkit-repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);
background-image: -ms-repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);
background-image: -o-repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);
background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.15), rgba(255,255,255,.15) 15%,
    rgba(255,255,255,  0) 15%, rgba(255,255,255,  0) 30%);