CSS 渐变

css渐变 IE10+支持, IE8/IE9 可通过IE滤镜来实现兼容.


css3 渐变基础 linear-gradient

linear-gradient(color1, color2) 是一种生成渐变颜色值, 可赋值给background;

linear-gradient(direction, colro1, color2); direction表示渐变的方向, 默认情况下是从上至下渐变;

以下演示白色是起点, 黑色是终点.

从上到下 (默认) to bottom | 180deg
从下到上to top | 0deg
从左到右to right | 90deg
从右到左to left | 270deg
从左到右, 向下 \ to right bottom | deg
从右到左, 向下 / to right bottom | deg
从左到右, 向上 / to right top | deg
从右到左, 向上 \ to right top | deg
html css格式 兼容问题
<div style="background: linear-gradient(#fff, #000);">从上到下 (默认) to bottom | 180deg</div>		
<div style="background: linear-gradient(to top, #fff, #000);">从下到上 to top | 0deg</div>
<div style="background: linear-gradient(to right, #fff, #000);">从左到右 to right | 90deg</div>
<div style="background: linear-gradient(to left, #fff, #000);">从右到左 to left | 270deg</div>

<div style="background: linear-gradient(to right bottom, #fff, #000);">从左到右, 向下 </div>
<div style="background: linear-gradient(to left bottom, #fff, #000);">从右到左, 向下 </div>
<div style="background: linear-gradient(to right top, #fff, #000);">从左到右, 向上 </div>
<div style="background: linear-gradient(to left top, #fff, #000);">从右到左, 向上 </div>
					
# 在渐变中使用透明度
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 
# 重复的线性渐变
background: repeating-linear-gradient(red, yellow 10%, green 20%);
# 径向渐变 (放射)
background: radial-gradient(center,size,start-color,last-color);
background: -webkit-radial-gradient(red, yellow, green);

					
/* 标准语法, 方向必须前缀 to */

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); /* 标准的语法(必须放在最后)

/* 改属性是CSS3, IE6~IE9通过IE滤镜来兼容 */

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

- GradientType 表示渐变类型,0 为缺省值,表示垂直渐变,1 表示水平渐变。
- startColorstr表示起点的颜色
- endColorstr 表示终点颜色
					

兼容方案 垂直水平渐变色

html
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#101010)";
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFFFFF, endColorstr=#101010);
background: linear-gradient(#FFFFFF, #F8F8F8); /* 浅色, 深色 */
background-color: #FBFBFB; /* 深色 */
					

多个渐变终止色

渐变背景
html
<div style="background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);">

背景效果

双条纹
css
background:linear-gradient(#fb3 50%, #58a 0);background-size: 100% 30px;
多条纹
css
background:linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;
垂直条纹
css
background:linear-gradient(to right,#fb3 50%, #58a 0); background-size: 30px 100% ;
45度斜向条纹

单个贴片包含四个条纹,只有这样才能做到无缝拼接

css
background:linear-gradient(45deg,#fb3 25%, #58a 0,#58a 50%,#fb3 0, #fb3 75%, #58a 0); background-size: 30px 30px;
使用循环渐变更加简单
css
background:repeating-linear-gradient(45deg,#fb3, #fb3 15px, #58a 0,#58a 30px);
任意角度斜向条纹
css
background:repeating-linear-gradient(60deg,#fb3, #fb3 15px, #58a 0,#58a 30px);
同色系条纹

把最深的颜色指定为背景色,同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹

css
background: #58a;
background-image:repeating-linear-gradient(30deg,hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0,transparent 30px);  

网格背景

说明 css
把多个渐变图案组合起来,让它们透过彼此的透明区域显现时,就会形成各种网格。例如,把水平和垂直的条纹叠加起来,得到桌布图案
					
background: white;
background-image:linear-gradient(90deg,rgba(200,0,0,.5) 50%, transparent 0),linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
					
说明 css
某些情况下,希望网格中每个格子的大小可以调整,而网格线条的粗细同时保持固定。例如,类似图纸辅助线的网格
					
background: #58a;
background-image:linear-gradient(90deg,white 1px, transparent 0),linear-gradient(white 1px, transparent 0);
background-size: 30px 30px;
					
说明 css
可以把两幅不同线宽、不同颜色的网格图案叠加起来,得到一个更加逼真的蓝图网格
					
background: #58a;
background-image:linear-gradient(90deg,white 2px, transparent 0),linear-gradient(white 2px, transparent 0),linear-gradient(90deg,hsla(0,0%,100%,0.3) 1px, transparent 0),linear-gradient(hsla(0,0%,100%,0.3) 1px, transparent 0);
background-size: 75px 75px,75px 75px,15px 15px,15px 15px;
					
说明 css
径向渐变能够创建的最简单的图案是圆点阵列
					
background: #655;
background-image:radial-gradient(tan 30%,transparent 0);
background-size: 30px 30px;  
					
说明 css
可以生成两层圆点阵列图案,并把它们的背景定位错开,这样就可以得到真正的波点图案
为了达到效果,第一层背景的偏移定位值必须是贴片宽高的一半。这意味着如果要改动贴片的尺寸,需要修改四处
# sass
@mixin polka($size,$dot,$base,$accent){
  background: $base;
  background-image:radial-gradient($accent $dot,transparent 0),radial-gradient($accent $dot,transparent 0);
  background-size: $size $size;
  background-position: 0 0 ,$size/2 $size/2;  
}  

@include polka(30px,30%,$655,tan);  
					
background: #655;
background-image:radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);
background-size: 30px 30px;
background-position: 0 0 ,15px 15px;
					
说明 css
这段代码还可以稍稍优化,可以把这些处在贴片顶角的三角形两两组合起来(即把第一组和第二组合并为一层渐变,把第三组和第四组合并为一层渐变),然后还可以把深灰色改成半透明的黑色——这样只需要修改底色就可以改变整个棋盘的色调,不需要单独调整各层渐变的色标了 
background:#eee;
background-image: linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0),linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0);
background-size: 30px 30px;
background-position: 0 0 ,15px 15px;

# SASS
@mixin checkerboard($size,$base,$accent:rgba(0,0,0,0.25)){
    background:$base;
    background-image: linear-gradient(45deg,$accent 25%,transparent 0,transparent 75%,$accent 0),linear-gradient(45deg,$accent 25%,transparent 0,transparent 75%,$accent 0);
    background-size: 2*$size 2*$size;
    background-position: 0 0 ,$size $size;    
  }
  @inclue checkerboard(15px,#58a,tan);
					
background:#eee;
background-image: linear-gradient(45deg,#bbb 25%,transparent 0),linear-gradient(45deg,transparent 75%,#bbb 0),linear-gradient(45deg,#bbb 25%,transparent 0),linear-gradient(45deg,transparent 75%,#bbb 0);
background-size: 30px 30px;
background-position: 0 0 ,15px 15px,15px 15px,30px 30px;
					
说明 css
这样的代码量不能算少,所以转到SVG方案可能是更好的选择 
可能有人会说,CSS渐变可以节省HTTP请求。但实际上,可以把SVG文件以dataURL的方式内嵌到样式表中
					
<svg xmlns="http//www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">
  <defs>
    <pattern id="pattern1" width=0.2 height=0.2 >
      <rect x="10" width="10" height="10"/>
      <rect y="10" width="10" height="10"/>
    </pattern>
  </defs>
   <rect id="rect1" x="0" y="0" width="100" height="100" fill="url(#pattern1)" />
</svg> 

div{
    height: 100px;
    width: 100px;
    background: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">\
      <defs>\
        <pattern id="pattern1" width="0.2" height="0.2" >\
          <rect x="10" width="10" height="10"/>\
          <rect y="10" width="10" height="10"/>\
        </pattern>]\
      </defs>\
      <rect id="rect1" x="0" y="0" width="100" height="100" fill="url(#pattern1)"/>\
    </svg>');
}
					
说明 css
伪随机背景
- 第一个想法可能就是创建一个具有四种颜色的条纹图案
- 真实地模拟条纹的随机性,把这组条纹从一个平面拆散为多个图层:一种颜色作为底色,另三种颜色作为条纹,然后再让条纹以不同的间隔进行重复平铺
- 因为最顶层贴片的重复规律最容易被察觉,应该把平铺间距最大的贴片安排在最顶层
-平铺贴片的尺寸现在是41×61×83=207583像素,比任何屏幕分辨率都要大。这个技巧被定名为“蝉原则”
					
background: hsl(20,40%,90%);
background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
linear-gradient(90deg,#ab4 23px,transparent 0),
linear-gradient(90deg,#655 41px,transparent 0);
background-size: 41px 100%,61px 100%,83px 100%;
					
说明 css
斑马线背景是与文本紧密结构的一种背景图案
					
padding:.5em;
line-height: 1.5;
background:beige linear-gradient(rgba(0,0,0,0.2) 50%,transparent 0) content-box 0 0/ auto 3em;
					

毛玻璃效果

毛玻璃
html css
<div class="frostedglass">
	<div class="frostedglass-inner">毛玻璃</div>
</div>
					
.frostedglass {
	width: 100px;
	height: 100px;
	font-size: 16px;
	/*计算值为 height - width*top*2*/
	line-height: 70px;
	z-index: 1;
	/*border-radius: 50%;*/
	position: relative;
	overflow: hidden;
	text-align: center;
	background: hsl(20, 40%, 90%) fixed;
	background-image: url(../demo/ad/ad.jpg); /* 背景图片 */
}

.frostedglass-inner:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	filter: blur(5px); /* 滤镜: 高斯模糊 */
	background: hsl(20, 40%, 90%) fixed;
	background-image: url(../demo/ad/ad.jpg); /* 背景图片 */
	z-index: -1;
}

.frostedglass-inner {
	position: absolute;
	top: 15%;
	right: 15%;
	left: 15%;
	bottom: 15%;
	background: hsla(0, 0%, 100%, .3); /* 色调,饱和度,亮度,透明度 IE9+ */
}
					
'