css 每天一练之背景渐变

作者: 不要变成发抖的小喵喵喵喵喵喵 | 来源:发表于2017-06-19 00:15 被阅读0次

特别注意：IE9以下不支持渐变，需要使用IE的渐变滤镜来实现渐变：

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,
endcolorstr=blue,gradientType=1);

其中上面的滤镜代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。

上面代码实现的是红色至蓝色的渐变，但是不含透明度变化，这是由于IE目前尚未支持opacity属性以及RGBA颜色，要实现IE下的透明度变化，还是需要使用IE滤镜，IE的透明度滤镜功能比较强大，这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

其中各个参数的含义如下：
opacity表示透明度，默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style用来指定透明区域的形状特征：
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。

兼容性的渐变背景效果

.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)));  
    background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
}

<div class="gradient"></div>

ie6下截图(图片来自原文)

以下来自菜鸟教程

从上到下的线性渐变

横向线性渐变

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

linear-gradient(red, blue)中第一个参数是top所以可以省略，如果写成bottom线性渐变就从bottom开始

纵向线性渐变

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

从上面两个例子可以看出线性渐变主要控制linear-gradient(red, blue)中第一个参数，如果写成left线性渐变从左边开始的纵向渐变，right同理。

对角线性渐变

#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}

从上面的例子可以看出对角线性渐变也是控制linear-gradient(red, blue)中第一个参数，如果写成left top线性渐变从左上角开始的对角渐变。

自定义角度的对角线性渐变

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
（但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。）

逆时针方向

30deg的对角径向渐变

#grad {
  background: -webkit-linear-gradient(30deg, red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(30deg, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(30deg, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(30deg, red, blue); /* 标准的语法 */
}

从上面的例子可以看出自定义对角线性渐变也是控制linear-gradient(red, blue)中第一个参数为要取得的水平线和渐变线之间的角度。

多个颜色点的渐变

彩虹色渐变

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Opera 11.1 - 12.0 */
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Firefox 3.6 - 15 */
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* 标准的语法 */
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

多个颜色点渐变也是控制linear-gradient()中的参数为多个多选的渐变颜色，其中颜色都可以使用rgba()来设置透明度。

重复的线性渐变

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准的语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

repeating-linear-gradient是重复线性渐变的关键，颜色后面跟的百分比是颜色所占比例。

径向渐变

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}

radial-gradient是径向渐变的关键，颜色后面的百分比是颜色所占比例。

径向渐变的形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

正圆径向渐变

#grad {
  background: -webkit-radial-gradient(circle,red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(circle,red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(circle,red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(circle,red 5%, green 15%, blue 60%); /* 标准的语法 */
}

重复的径向渐变

#grad {
  background: -webkit-repeating-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-repeating-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-repeating-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: repeating-radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}

repeating-radial-gradient是重复径向渐变的关键，颜色后面跟的百分比是颜色所占比例。

在线编辑

网友评论

本文标题：css 每天一练之背景渐变

本文链接：https://www.haomeiwen.com/subject/abfwqxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！