CSS 渐变...意见？
我设计网站已经很长时间了，只是使用图像进行渐变，对于小渐变来说，这似乎工作正常并且不会增加太多加载时间，但现在新的 CSS (webkit/moz/o/khtml,更不用说 6,7,8,9）
，所以为了只有一个通用渐变，需要很多 css。
对于需要大量渐变的网站，我使用 Less.js 来使其稍微好一点，但这仅止于此......
我只是想知道在图像上使用 css 渐变的大小更有意义，如果真的有一个突破点的话。
[前任。一个小的 5px 渐变，只拥有 5px 图像更有意义，但像 1000px 渐变一样，仅使用 css 可能更有意义]
哦，我知道有 SVG，我还没有真正尝试过，但它工作得很好？
任何意见将不胜感激。 :)
I've been designing website for a long time just using images for gradients, for small gradients this seems to work fine and not add much loading time, but right now with so much fragmentation with newer CSS (webkit/moz/o/khtml, and not to mention ie 6,7,8,9)
so in order for just one universal gradient theres gonna be a lot of css.
With sites that are going to require a ton of gradients I use Less.js to make it slightly better, but this only goes so far...
I was just wondering at what size does it make more sense to use css gradients over images, if there really is a breaking point.
[ex. a small 5px gradient, it makes more sense to just have a 5px image, but like a 1000px gradient it probably makes more sense to just use css]
Oh and I know there's SVG, I haven't really tried it but does it work well?
Any opinions would be much appreciated. :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我用于所有浏览器渐变的代码：
您需要指定一个高度或
zoom: 1以将hasLayout应用于元素，以便在 IE 中工作。更新：
这里为所有 LESS 用户提供了一个 LESS Mixin (CSS) 版本：
The code I use for all browser gradients:
You will need to specify a height or
zoom: 1to applyhasLayoutto the element for this to work in IE.Update:
Here is a LESS Mixin (CSS) version for all you LESS users out there:
总而言之：您可以在每个浏览器中通过单个 SVG 支持 CSS3 渐变，并且对 IE9 支持加分，Opera 很久以前就支持了（最近才支持 -o- 前缀） CSS3 渐变最近），它消除了由于两种 webkit 语法差异而出现的问题。这两种 webkit 语法不仅仅是单词和数字的顺序或组合不同，它们彼此完全不兼容，而且很难标准化。
也就是说，如果您使用 SVG 作为文件中的背景图像。如果您采取额外的步骤将 SVG 作为 datauri 嵌入，您将失去对 6 之前的 Firefox 的支持。不过，所有版本的 Firefox 都支持“正确的”CSS3 渐变语法，因此在大多数情况下，仅使用它并不会太麻烦。 SVG datauri 加上 -moz- CSS3。
主要技巧是需要一些努力并学习 SVG 内部大小调整 -> 之间的相互作用。视口 -> CSS 背景内部大小调整/平铺 ->最后是背景大小等修饰符。这就是为什么尽管 SVG 包罗万象，人们还是避免使用 SVG。
我未能成功的事情是同时在具有基于百分比的停止的 CSS3 重复渐变和 SVG 之间进行标准化（支持 -moz-）。问题在于，无论采用哪种方式组合来产生所需的结果，其中一种方法都需要以破坏另一种方法的方式设置背景大小。这是一个非常具体的用例。
这是一个水平线性渐变：
作为 datauri（删除了间距和换行符）
这是 CSS3
这是一个重复的斜条纹 SVG：
以及 datauri
和它的 CSS3，它不会影响 IE9：
...或者类似的东西，我已经多次破坏它，试图让 SVG 看起来与隐蔽 Firefox <6 的渐变相同，但找不到一种方法让这两个规则共存（背景大小）没有得到正确的，我忘记了我最初拥有的。可能只是硬着头皮从文件中提取它（效果很好）或使用最小的 JS 填充程序来使 Firefox 加载 datauri。
再加上旧的 Webkit 语法......会使用背景大小并且总是会破坏新语法。让两种 Webkit 语法同时工作，而不会破坏另一种语法，会很有趣。
对我来说，在这里使用百分比的目的是使用一个渐变来支持大小合适的条纹的大小容器，同时还自动调整大小到高度或宽度，以更适合特定元素的为准。
这里有一些陷阱，所以这不是在公园散步。如果您深入研究，您会发现一些随机的浏览器错误。就像我设置了不同的重复渐变一样，以 SVG 定义重复渐变的方式指定。在 IE9 中工作得很好，但显然，当 WebKit 嵌入为 datauri 和跨多个不同大小的元素应用百分比宽度时，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/。
To sum up: you can get support for gradients via a single SVG in every browser that supports CSS3 gradients, with bonus points for IE9 support, Opera going back a long time (only recently supported -o- prefixed CSS3 gradients recently), and it removes the issues that crop up due to the differences in the two webkit syntaxes. The two webkit syntaxes aren't just different ordering or combination of words and numbers, they're completely incompatible with each other, and it can be very hard to normalize.
That's if you're using the SVG as an a background image from a file. If you go the extra step to embedding the SVG as a datauri you lose support for Firefox prior to 6. All version of firefox support the "correct" CSS3 gradient syntax though, so it's not too much of a chore in most cases to just use the SVG datauri plus -moz- CSS3.
The main trick is that it takes some screwing around and learning the interactions between SVG internal sizing -> viewport -> CSS background internal sizing/tiling -> and finally modifiers like background-size. This is why, despite it being a catch all, that people avoid using SVG.
The thing I've failed at succeeding at is normalizing between CSS3 repeating gradients with percentage based stops and SVG at the same time (supporting with -moz-). The problem is that no matter what combination of ways to produce the desired result, one or the other requires background-size to be set in such a way that it breaks the other. That's a pretty specific use case.
Here's a horizontal linear gradient:
As datauri (spacing and line breaks removed)
And here's that as CSS3
Here's a repeating diaganal stripes SVG:
And the datauri
And the CSS3 for it, which won't hit IE9:
...Or something like that, I've mangled it so many times trying to get the SVG to look the same as the gradient to covert Firefox <6 but can't find a way to get the two rules to coexist (the background sizing) without getting it right that I forgot what I originally had. May just bite the bullet and fallback to pulling it from a file (which works fine) or a minimal JS shim to make firefox load the datauri.
Plus what the old Webkit syntax would be...something that would use background-size and invariably break the new syntax. Have fun getting both Webkit syntaxes to work at the same time for this one without one breaking the other.
The purpose of using a percentage here for me was in using one gradient to support large and small containers with size appropriate stripes, while also auto sizing to either height or width, whichever is more appropriate for the specific element.
There are gotchas here so it's not a walk in the park. There's some random browser bugs that you find if you go down the rabbit hole. Like I had the repeating gradient set up different, specified in SVG's way of defining a repeating gradient. Worked great in IE9 but apparently there's some odd issues in WebKit when embedded as a datauri and percentage width applied across multiple different size elements. Basically it was using one single shared copied of the SVG paint server for multiple elements and causing it to size to the first element opened, and then be half broken and semi-resizing as other stuff opened.
But at the end of the day it's been easier to deal with the SVG issues than the CSS3 gradient issues when targeting the same set of browsers. You have to use SVG to cover IE9 anyway (the ms-filter is trash and will not work with any other CSS3 stuff like border radius, it sucks ass all the way through the parking lot for performance).
Wrote most of this up here: http://bbenvie.com/svggrads
As an addendum, here's a writeup on achieving sprited gradients in SVG (multiple gradients from one svg): http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/.
我当前的方法是使用 CSS3 渐变（
webkit-、moz-等）并提供旧的背景图像作为后备。考虑到当前的带宽，图像的大小往往不会成为问题 - 即使 200 像素的渐变也只需要大约 200 字节。大部分开销来自对图像的多个请求的延迟 - 这可以使用 CSS 来消除。使用 CSS 的主要好处是它可以减少请求数量。在页面上使用的图像越多，收益就越大。
My current approach is to use the CSS3 gradient (
webkit-,moz-, etc.) and provide the old background image as a fallback. The size of the image doesn't tend to be an issue given current bandwidths - even a 200px gradient only takes about 200 bytes. The majority of the overhead is from latency from multiple requests for the images - which would be eliminate using CSS.The main gains from using CSS is that it would reduce the number of requests. The more images that you use on a page the greater the gains.
使用图像的问题是你能做的事情受到更多限制。如果您想使用背景渐变并且该框比您预期的要大，则渐变会提前停止或开始重复。这两种解决方案可能都不是您想要的。
您可以查看 www.css3please.com 了解如何在 css3 中获得良好效果的示例（带有实时示例代码） 。对于背景渐变，您可以使用以下内容：
The problem with using images is that you are much more restricted in what you can do. If you want to use a background gradient and the box is larger than you anticipated, either the gradient stops early or it starts repeating. Both solutions are probably not what you want.
You could check www.css3please.com for examples on how to get the nice effects in css3 (with live sample code). For background gradients you can use the following: