Rumah > hujung hadapan web > tutorial css > CSS3 渐变背景色使用方法 兼容IE9+

CSS3 渐变背景色使用方法 兼容IE9+

一个新手
Lepaskan: 2017-09-06 11:43:38
asal
3719 orang telah melayarinya

背景色,除了纯色以外,还能够使用多种颜色组合成为渐变背景色,使页面丰富。

渐变背景分为两种:

1、线性渐变;

2、环形渐变;

 

线性渐变

线性渐变分为:横向、纵向、对角渐变三种渐变

语法

 = linear-gradient([ [ | to  ] ,]? [, ]+)

 = [left | right] || [top | bottom]

 =  [  |   ]?

:用角度值指定渐变的方向。

to left:设置渐变为从右到左;

to right:设置渐变为从左到右;

to top:设置渐变为从下到上;

to bottom:设置渐变为从上到下;

:设置指定渐变的起止颜色

:指定颜色

:用长度值指定起止色位置。不允许负值

:用百分比指定起止色位置。

 

background:linear-gradient(参数1,参数2,参数3,参数4....参数N)

参数1:可填可不填,填写的话写方向 如:to right,就是渐变方向由左到右,不填写默认从上到下渐变。

参数1':与参数1基本一致,写在-webkit-,-moz-,-o-前缀情况下,如:left 代表渐变方向开始的位置

参数2:渐变开始颜色,可填rgba()或者#fff或者white,后面加百分比代表颜色占比多少,如 #fff 50% 代表白色占比50%。

参数3:若后面无参数 则为渐变终止颜色,与参数2属性可选一致。

参数4....参数N:可增加的渐变颜色节点。最后一个为渐变终止颜色

 

示例

1

2

3

4

5

linear-gradient(#fff, #75aaa3);

 linear-gradient(to bottom, #fff,#75aaa3);

linear-gradient(to top, #75aaa3, #fff);

linear-gradient(180deg, #fff, #75aaa3);

linear-gradient(to bottom, #fff 0%, #75aaa3 100%);

Salin selepas log masuk


但是,还需要兼容浏览器:

1

2

3

4

5

6

7

//从下至上

#text.btt{

background: -webkit-linear-gradient(bottom,#fff, #75aaa2);

background: -o-linear-gradient(bottom,#fff, #75aaa2);

background: -moz-linear-gradient(bottom,#fff, #75aaa2);

background: linear-gradient(to top,#fff, #75aaa2); /* 标准的语法(必须放在最后) */

}

Salin selepas log masuk

1

2

3

4

5

6

7

//带透明度

#text.opac{

background: -webkit-linear-gradient(rgba(256,256,256,0), #75aaa2);

background: -o-linear-gradient(rgba(256,256,256,0), #75aaa2);

background: -moz-linear-gradient(rgba(256,256,256,0), #75aaa2);

background: linear-gradient(rgba(256,256,256,0), #75aaa2); /* 标准的语法(必须放在最后) */

}

Salin selepas log masuk

 

Atas ialah kandungan terperinci CSS3 渐变背景色使用方法 兼容IE9+. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan