综合css – 兼容性的渐变背景效果

最新推荐文章于 2021-10-03 22:31:05 发布

原创最新推荐文章于 2021-10-03 22:31:05 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #filter #浏览器 #class #div #ie

我的学习笔记同时被 2 个专栏收录

38 篇文章

订阅专栏

css技术

12 篇文章

订阅专栏

本文介绍了一种使用CSS实现的渐变背景效果，并确保在不同浏览器中的兼容性。通过使用滤镜、背景属性及特定前缀，如-moz-linear-gradient和-webkit-gradient等，可以在支持这些特性的浏览器中展示从红色到蓝色透明度渐变的效果，同时为不支持渐变的老式浏览器提供回退方案。

综合css – 兼容性的渐变背景效果

.gradient{
    width:300px;
 height:150px;
    filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
    background:red; /* 一些不支持背景渐变的浏览器 */
    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
}
<div class="gradient"></div>