Question

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

所以为了只有一个普遍的渐变，这将是很多css。

对于需要大量渐变的网站，我使用Less.js使其稍微好一点，但这只是到目前为止......

我只是想知道在图像中使用css渐变更有意义，如果确实存在断点那么大。

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

哦，我知道有SVG，我还没有真正尝试过，但它运作良好吗？

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

Answer 1

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

您可以查看www.css3please.com有关如何在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 */
}

Answer 2

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

如果您将SVG用作文件中的背景图像，那就是这样。如果你采取额外步骤将SVG作为数据库嵌入，你将失去对6之前的Firefox的支持。所有版本的firefox都支持“正确的”CSS3渐变语法，所以在大多数情况下使用它并不是太多的苦差事SVG datauri加-moz- CSS3。

主要技巧是需要一些麻烦并学习SVG内部大小调整之间的相互作用 - ＆gt; viewport - ＆gt; CSS背景内部大小调整/平铺 - ＆gt;最后是像background-size这样的修饰符。这就是为什么人们避免使用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>

作为datauri（删除间距和换行符）

#base64 {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxzdHlsZT5zdG9we3N0b3AtY29sb3I6I2YwMH08L3N0eWxlPjxsaW5lYXJHcmFkaWVudCBpZD0iZyI+PHN0b3Agc3RvcC1vcGFjaXR5PSIuNCIvPjxzdG9wIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cpIi8+PC9zdmc+);
}

这就是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);
}

这是一个重复的diaganal条纹SVG：

<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>

数据库

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

它的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＆lt; 6但是无法找到一种方法来获得两个规则共存（背景大小）没有说得对，我忘记了我原来的东西。可能只是咬住子弹和后备从文件（工作正常）或一个最小的JS垫片拉动它来使firefox加载数据库。

再加上旧的Webkit语法是什么......会使用background-size并且总是打破新语法。让这两个Webkit语法同时工作，而不会打破另一个，这很有趣。

在这里使用百分比的目的是使用一个渐变来支撑大小适当条纹的大容器和小容器，同时还可以自动调整高度或宽度，以适合特定元素为准。

这里有陷阱，所以不是在公园散步。如果你走下兔子洞，你会发现一些随机的浏览器错误。就像我将重复渐变设置为不同，以SVG定义重复渐变的方式指定。在IE9中工作得很好，但是当嵌入数据库并且在多个不同大小的元素中应用百分比宽度时，WebKit显然存在一些奇怪的问题。基本上它是使用SVG绘制服务器的一个单独共享复制多个元素并使其大小到打开的第一个元素，然后在打开其他东西时半破坏和半大小调整。

但是在当天结束时，当针对同一组浏览器时，处理SVG问题比处理CSS3梯度问题更容易。无论如何你必须使用SVG来覆盖IE9（ms-filter是垃圾，不能与任何其他CSS3的东西一起工作，比如边界半径，它会在停车场一直吮吸屁股以获得性能）。

在这里写下大部分内容：http://bbenvie.com/svggrads

作为附录，这里有一篇关于在SVG中实现精简渐变的文章（来自一个svg的多个渐变）：http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/。

Answer 3

我目前的做法是使用CSS3渐变（webkit-，moz-等）并提供旧背景图像作为后备。在给定当前带宽的情况下，图像的大小不会成为问题 - 即使200px梯度也只需要大约200个字节。大部分开销来自多个图像请求的延迟 - 使用CSS可以消除这种延迟。

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

Answer 4

我用于所有浏览器渐变的代码：

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

您需要指定一个高度或zoom: 1以将hasLayout应用于元素，以便在IE中使用。

<强>更新

以下是适合所有LESS用户的LESS Mixin（CSS）版本：

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}

CSS Gradients ...意见？

4 个答案: