欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

Css中背景和渐变属性详解

 

1.背景绘制区域

background-clip

设置背景显示区域

属性:background-clip

值:border-box:背景被裁剪到边框,默认值

padding-box:背景被裁减到内边距框(忽略内边距)

content-box:背景被裁减到内容框上(只显示内容区域)

2.背景的定位区域

背景从哪开始画

属性:background-origin

取值:border-box:从边框开始画

padding-box:从内边距处开始画

content-box:从内容区域上开始画

3.背景合并

属性:background:

backgroundcolor url() repeat attachment position;

常用方式:

backgroundurl repeat position;

backgroundurl(images/1.jpg) no-repeat -15px 20px;

background-imageurl();

background-repeatno-repeat;

background-position-15px 20px;

backgroundred;

backgroundurl(1.jpg);

渐变

多个颜色值之间平缓过度

渐变分类:

1、线性渐变

2、径向渐变

3、重复渐变

注意:

所有的渐变,都是通过 background-image 进行设置

线性渐变:linear-gradient

径向渐变:radial-gradient

重复线性:repeating-linear-gradient

重复径向:repeating-radial-gradient

background-image:linear-gradient();

1、线性渐变

linear-gradient(angle,color-point1,color-point2,...)

angle:

取值范围有:关键词:to top ,to bottom ,to right ,

角度: 0deg --> to top

90deg -->to right

180deg --> to bottom

color-point:渐变颜色的开始点、中间过渡点、结束点

取值范围有:

red 0%:从开始处显示红色

green 50%: 到 50% 位置处 ,变成绿色

blue 100% : 到结尾处,变为蓝色

2、径向渐变

radial-gradient([size at position,]color-point1,color-point2, ....)

size at positionsize即放射的圆形的半径 position即原点所在坐标

left top bottom right center

3、重复渐变

background-imagerepeating-linear-gradient(to bottom,red 0,green 10px)

4、浏览器兼容性

对不支持的版本,通过前缀

Firefox -moz-

Chrome,Safar -webkit-

Opera -o-

background-image-webkit-linear-gradient(to bottom,red,green); Chrome Safari

background-image-o-linear-gradient(to bottom,red,green); Opera

background-image-moz-linear-gradient(to bottom,red,green); Firefox

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r44333.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-11-02 10:17 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。