欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

兼容多种浏览器的渐变颜色背景_html/css_WEB-ITnose

程序员文章站 2022-03-31 17:38:41
...
经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景。

下面是当前五大浏览器对 gradient 的支持

Css代码

  1. #gradient {
  2. width: 200px;
  3. height: 200px;
  4. /* 如果浏览器不支持渐变,使用图像作为背景 */
  5. background: url(gradient.jpg);
  6. /* Webkit: Safari 4-5, Chrome 1-9 */
  7. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6600), to(#339900));
  8. /* Webkit: Safari 5.1+, Chrome 10+ */
  9. background: -webkit-linear-gradient(top, #ff6600, #339900);
  10. /* Firefox 3.6+ */
  11. background: -moz-linear-gradient(top, #ff6600, #339900);
  12. /* Opera 11.10+ */
  13. background: -o-linear-gradient(top, #ff6600, #339900);
  14. /* IE 10 */
  15. background: -ms-linear-gradient(top, #ff6600, #339900);
  16. /* IE
  17. /* 注意:这一行必须写在最后 */
  18. FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);}

Html代码

啥时没有IE6,啥时世界算太平啊。万恶的IE。