CSS3中新增的背景属性
程序员文章站
2022-05-29 15:22:39
...
CSS3中背景和边框的相关样式:包括背景相关的几个属性,如何在一个背景中使用多个、图像文件、如何绘制圆角边框、如何给元素添加图形边框:
1、新增的背景属性:
背景属性 | 属性功能 |
background-clip | 指定背景的显示范围 |
background-origin | 指定绘制背景图像时的起点 |
background-size | 指定背景中图像的尺寸 |
background-break | 指定内联元素的背景图像进行平铺时的循环方式 |
(1)background-clip指定背景的显示范围:
1)background-clip主要用来控制背景显示的区域;
2)使用方法:background-clip:border-box || padding-box || content-box
①border-box此值的为默认值,背景从border区域向外剪裁,也就是超出部分将被裁剪掉;
②padding-box:背景从padding区域向外剪裁,超过padding区域的背景将被剪裁掉;
③content-box:背景从content区域向外剪裁,超过content区域的背景将被剪裁掉;
3)浏览器的兼容情况:IE8版本以上、Firefox3.0版本以上、chrome2.0以上、Opera9.6版本以上、Safari4.0以上。background-clip在各种浏览器内核下,都具有自己的私有前缀:
①Firefox3.6版本以下(包含3.6版本):-moz-background-clip:border || padding;
②Firefox4.0版本以上:支持border-box、padding-box、content-box并且不需要带上前缀,如果带上了"-moz",那么在Firefox4.0+版本反而是一种错误的写法;
③background-clip兼容各浏览器的正确写法:
/*Firefox3.6以下版本*/
-moz-background-clip:border || padding;
/*Webkit*/ -webkit-background-clip:border-box || padding-box || content-box;
/*W3C标准 IE9版本以上或者Firefox4.0版本以上*/ background-clip:border-box || padding-box || content-box;
/*Webkit*/ -webkit-background-clip:border-box || padding-box || content-box;
/*W3C标准 IE9版本以上或者Firefox4.0版本以上*/ background-clip:border-box || padding-box || content-box;
4)background-clip属性的应用:
①HTML代码:
<div>background-clip指定背景的显示范围</div>
②CSS代码:
div{
width: 300px;
height: 150px;
border: 20px dashed red;
padding: 20px;
background-color: lightblue;
background-clip: padding-box;
/*background-clip: border-box;*/
/*background-clip: content-box;*/
}
③效果图如下:
A、background-clip: padding-box;时的效果图:
B、background-clip: border-box;时的效果图:
C、background-clip: content-box;时的效果图:
(2)background-origin属性指定绘制背景图像的绘制起点:
1)在绘制背景图像时,默认是从内补白(padding)区域的左上角开始绘制,但是可以利用background-origin属性来指定绘制时从边框的左上角开始绘制,或者是从内容的左上角开始绘制;
2)使用方法:background-origin:border-box(border) || padding-box(padding) || content-box(content)
①padding-box(padding):此值为background-origin的默认值,决定background-position起始位置从padding的外边缘(border的内边缘)开始显示背景图片;
②border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片;
③content-box(content):此值决定background-position起始位置从content的外边缘(padding的内边缘)开始显示背景图片;
3)语法:background-origin在早期的Webkit个Gecko内核浏览器(Firefox3.6以下版本、Safari版本和chrome版本)支持一种老式的语法规则,类似于background-clip在Firefox3.6以下的版本一样:background-origin:padding || border || content;,那么在现代浏览器都支持一种新的语法:background-origin:padding-box || border-box
|| content-box;,为了兼容新老版本的浏览器,在使用background-origin改变background-position的原点位置时,最好新旧语法一起加上,并且新语法放在老语法后面,这样只要支持新语法规则的浏览器自动会识别background-origin的最新语法;
4)在IE8以下版本解析是不一样的,在IE7以下的版本background-origin默认是从border开始显示背景图片;
5)浏览器的兼容情况:IE9.0版本以上、Firefox3.0版本以上、chrome1.0版本以上、Opera9.6版本以上、Safari3.1版本以上background-origin虽然现代浏览器都支持,但在不同内核浏览器下还需要带上其各自的前缀,这样在实际应用中最好按下面的语法规则书写,以保证只要支持background-origin的都能正常运行,书写规范以及顺序如下:
/*Old Webkit and Gecko*/
-moz-background-origin:padding || border || content;
-webkit-background-origin:padding || border || content;
/*New Webkit and Gecko*/
-moz-background-origin:padding-box || border-box || content-box;
-webkit-background-origin:padding-box || border-box || content-box;
/*Presto Opera浏览器*/
-o-background-origin:padding-box || border-box || content-box;
/*W3C标准*/
background-origin:padding-box || border-box || content-box;
-moz-background-origin:padding || border || content;
-webkit-background-origin:padding || border || content;
/*New Webkit and Gecko*/
-moz-background-origin:padding-box || border-box || content-box;
-webkit-background-origin:padding-box || border-box || content-box;
/*Presto Opera浏览器*/
-o-background-origin:padding-box || border-box || content-box;
/*W3C标准*/
background-origin:padding-box || border-box || content-box;
6)background-origin属性的应用:
①HTML代码:
<div>background-origin属性指定绘制背景图像的绘制起点</div>
②CSS代码:
div{
width: 600px;
height: 300px;
background-image: url(../img/tour1.jpg);
background-repeat: no-repeat;
border: 20px dashed red;
padding: 20px;
background-origin: padding-box;
/*background-origin: border-box;
background-origin: content-box;*/
}
③效果图如下:
A、background-origin: padding-box;时的效果图:
B、background-origin: border-box;时的效果图:
C、background-origin: content-box;时的效果图:
(3)background-size属性指定背景图片的尺寸:
1)在CSS3中,可以使用background-size属性来指定背景图像的尺寸;
2)使用方法:background-size:auto || <length> || <percentage> || cover || contain;
①auto:此值为默认值,保持背景图片的原始高度和宽度;
②length:设置背景图像的高度和宽度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值则会被设置为auto;
③percentage:以父元素的百分比来设置背景图像的宽度和高度,第一个值设置为宽度,第二个值设置为高度。如果只设置一个值,则第二个值会被设置为auto;
④cover:此值是将图片放大,以适合铺满整个容器,这个主要运用在当图片小于容器又无法使用background-repeat来实现时,我们就可以采用cover将背景图片放大到适合容器的大小,但这种方法会使得背景图片失帧;
⑤contain:此值刚好与cover相反,其主要是将背景图片缩小,以适合铺满整个容器,这个主要运用在当图片大于元素容器时,而又需要将背景图片全部展示出来,此时我们就可以使用contain将图片缩小到适合容器大小为止,这种方法同样会使背景图片失帧;
3)浏览器的兼容情况:
background-size和其他的一些CSS3属性一样,需要加上自己的别名:
/*Mozilla*/
-moz-background-size:auto || <length> || <percentage> || cover || contain;
/*Webkit*/
-webkit-background-size:auto || <length> || <percentage> || cover || contain;
/*Presto*/
-o-background-size:auto || <length> || <percentage> || cover || contain;
/*W3C标准*/
background-size:auto || <length> || <percentage> || cover || contain;
/*Mozilla*/
-moz-background-size:auto || <length> || <percentage> || cover || contain;
/*Webkit*/
-webkit-background-size:auto || <length> || <percentage> || cover || contain;
/*Presto*/
-o-background-size:auto || <length> || <percentage> || cover || contain;
/*W3C标准*/
background-size:auto || <length> || <percentage> || cover || contain;
4)background-size属性的应用:
①HTML代码:
<div>background-size属性指定背景图片的尺寸</div>
②CSS代码:
div{
width: 500px;
height: 300px;
background-image: url(../img/tour1.jpg);
background-repeat: no-repeat;
border: 20px dashed red;
padding: 20px;
background-size: auto;
/*background-size: 400px 200px;*/
/*background-size: 600px;*//*保持原有的宽高比例*/
/*background-size: 50% 50%;*/
/*background-size: 70%;*//*保持原有的宽高比例*/
/*background-size: cover;*/
}
③效果图如下:
A、background-size: auto;时的效果图:
B、background-size: length length;时的效果图:
C、background-size: length;时的效果图:
D、background-size: percentage percentage;时的效果图:
E、background-size: percentage;时的效果图:
F、background-size: cover;时的效果图:
G、background-size: contain;时的效果图:
(4)background-break属性指定背景图像的尺寸:
1)CSS3中的标签元素能被分在不同区域(如:让内联元素span跨多行),background-break属性能够控制背景在不同区域显示;
2)background-break属性的取值:
①background-break:continuous;此属性是默认值,忽视区域之间的间隔空隙(应用图片就像将不同的区域看作一个区域)
②background-break:bounding-box;此属性值是重新考虑区域之间的间隙;
③background-break:each-box;对每一个独立的标签区域进行背景的重新划分;
2、显示多个背景图片:
(1)在一个元素中可以显示多个背景图片,即在CSS3中一个元素可以显示多个背景图像,还可以将多个背景图片进行重叠显示,这样可以让我们对背景中所用素材的调整变得更加容易;
(2)使用方法:background-image:url(1.png),url(2.png),url(3.png);
(3)图层的排序方法:浏览器中显示时叠放的顺序从上往下指定的,第一图像文件放在最上面,最后指定的文件是放在最下面的;
3、使用图像边框:
(1)在CSS3中增加了一个border-image属性,可以让元素的长度或宽度处于随时变化时,变化状态的边框统一使用一个图像文件来进行绘制;
(2)border-image属性最简单的使用方法:
1)-webkit-border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距;
2)-moz-border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距;
3)-o-border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距;
4)border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距;
其中的参数:图像的路径、上边距、右边距、下边距、左边距必须进行指定,但是如果上边距、右边距、下边距、左边距的值完全一样,那么可以缩写为一个,写法:border-image:url("边框图像路径") 边距;
5)当我们指定了边距以后,浏览器会对这个背景图像进行切割,如下图:
会将图像分割成九个部分,如下图:
在浏览器中显示的时候,border-top-left-image、border-top-right-image、border-bottom-left-image、border-bottom-right-image不会进行任何的拉伸。而border-top-image、border-right-image、border-bottom-image、border-left-image会分别作为上边框、右边框、下边框、左边框的这个背景图像来进行显示,必要的时候还可以将这四个图像进行平铺或者伸缩;
(3)border-image属性指定边框的宽度:
1)在CSS3中除了可以使用border属性和border-width属性来指定宽度,我们还可以使用border-image属性来指定边框的宽度;
2)指定方法:border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距 / border宽度;
3)另外border的宽度也可以对四条边进行分别设置:
设置的方法:border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距 / border上宽度 border右宽度 border下宽度 border左宽度;
设置的方法:border-image:url("边框图像的路径") 上边距 右边距 下边距 左边距 / border上宽度 border右宽度 border下宽度 border左宽度;
(4)指定四条边的背景的显示方法:
1)在CSS3中可以在border-image属性中指定元素四条边中的图像,是以拉伸的方式显示还是平铺的方式显示;
2)指定方法:border-image:url("") 上边距 右边距 下边距 左边距 / border宽度 topbottom leftright;
3)topbottom表示元素的上下两条边中图像的显示方法,leftright表示元素的左右两条边中的显示方式,在显示方式中可以指定的值有repeat、stretch、round:
①repeat:将图像以平铺的方式显示;
②stretch:将图像以拉伸的方式显示;
③round:将图像进行平铺显示,但是如果最后一幅图不能被完全显示时,就不显示图像,则把之前的图像扩大;