CSS中一些渐变效果与透明

柔情只为你懂 2021-12-11 01:39 310阅读 0赞

最近在帮公司做网站时，用到了比较多的渐变效果和透明作用，linear-gradient等，现记录下来。毕竟少用，易忘呀。

【一】渐变效果

.nav0_item:hover, .nav0_item_current
    {
        
        background: -moz-linear-gradient(top, rgba(178, 178, 178, 1) 0%, rgba(222, 222, 222, 1) 49%, rgba(197, 197, 197, 1) 51%, rgba(200, 200, 200, 1) 100%);
        background: -o-linear-gradient(top, rgba(178, 178, 178, 1) 0%, rgba(222, 222, 222, 1) 49%, rgba(197, 197, 197, 1) 51%, rgba(200, 200, 200, 1) 100%);
        background: -webkit-gradient(linear, right top, right bottom, color-stop(0,rgba(178, 178, 178, 1)),color-stop(0.49,rgba(222, 222, 222, 1)),color-stop(0.51,rgba(197, 197, 197, 1)), color-stop(1, rgba(200, 200, 200, 1)));
        background: -webkit-linear-gradient(top, rgba(178, 178, 178, 1) 0%, rgba(222, 222, 222, 1) 49%, rgba(197, 197, 197, 1) 51%, rgba(200, 200, 200, 1) 100%);
        color: #EA470B;
    }

第三行后的两个-webkit-中，虽然同样是针对webkit核心的浏览器，但部分浏览器不支持后者（如傲游），但前者大部分都支持。两者的先后问题，有没有需要考虑呢？看具体情况。

上面的代码中，主要说明了用到linear（线性渐变），并指定渐变的方向、途中相应路径的颜色rgba。

效果如下图：

![2011112713011560.jpg][]

在部分版本低的IE浏览器中，不支持上面的CSS！当然要补充另外一种方法。PS：上图的效果在IE下用CSS做觉得麻烦了，我是偷懒在判断是ie核心时，直接调用另外一个CSS，它是用背景图片填充的。下面这个代码实现另外一种平铺渐变效果，没中间那条亮痕。

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66f4f4f4,endcolorstr=#f4f4f4,gradientType=0)

【二】透明，这个没多少好说的。第二个是针对IE的。

opacity：0.5
    filter:alpha(opacity=20)

转载于:https://www.cnblogs.com/oneivan/archive/2011/11/27/2264974.html

[2011112713011560.jpg]: /images/20211210/84f39c56a18f4905bb49e690ef8be339.png