css 渐变背景色-css背景渐变每天练习

bendan520 2023年8月24日 css 0

下面是CSS为了兼容而设计的部分渐变背景（gradient）效果

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

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

里面的滤镜代码主要有三个参数，分别是：startcolorstr、endcolorstr、gradientType。

其中，gradientType=1表示垂直渐变，gradientType=0表示水平渐变。 startcolorstr="color" 表示渐变开始处的颜色，endcolorstr="color" 表示渐变结束处的颜色。

上面的代码实现了从白色到黄色的渐变，但不包含透明度变化。这是因为 IE 仍然不支持不透明度属性和 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是一个可选参数css 渐变背景色，如果要设置渐变的透明度效果，可以使用它们来指定最后的透明度。范围也是 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)); 
}

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)中的第一个参数是topcss 渐变背景色，所以可以省略。如果写为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); /* 标准的语法 */
}

从两个例子可以看出，线性渐变主要控制线性渐变中的第一个参数（红，蓝）。如果写成左线性渐变，则水平渐变是从右边开始的，右边也是一样。

对角线性渐变

#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 Linear Gradient，对角线性渐变是从左上角开始。

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

该角度是水平线和梯度线之间的角度，按逆时针方向估计。换句话说，0deg 将创建从下到上的渐变，90deg 将创建从左到右的渐变。

（但是，请注意，许多浏览器（Chrome、Safari、firefox等）使用旧标准，即0deg将创建从左到右的渐变，90deg将创建从下到上的渐变。转换公式90 - x = y，其中 x 是标准角度，y 是非标准角度。）

逆时针

30°对角径向渐变

#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%);
}

重复线性渐变是重复线性渐变的关键，颜色旁边的比例是颜色的比例。

径向渐变

#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是径向渐变的关键，颜色旁边的比例就是颜色的列。

径向渐变的形状

形状参数定义形状。它可以是值圆或椭圆。其中，circle代表矩形，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 渐变背景色-css背景渐变每天练习

发表评论

发表回复取消回复

相关文章

发表评论

发表回复 取消回复

发表回复取消回复