背景尺寸属性:
背景尺寸属性是CSS3中新增的一个属性,专门用来设置背景图片的大小。
默认是:背景图片自身原大小
background-size:第一个参数(宽度)第二个参数(高度);
1.设置具体像素
background-size:100px 100px;
2.设置百分比
background-size:50% 50%;(宽度是图片宽度的一半,高度是图片高度的一半)
3.宽度的等比拉伸
background-size:auto 100px;
4.高度的等比拉伸
background-size:100px auto;
5.cover
background-size:cover;(告诉系统图片需要等比拉伸,直到宽度和高度填满元素)
6.content
background-size:content;(告诉系统图片需要等比拉伸,直到宽度或高度其中一个填满元素即可)
background-origin(限定背景图片定位区域的属性)
----告诉系统背景图片是从什么区域开始显示,默认情况下是从元素的padding区域开始显示。即:background-origin:padding-box;
background-origin:border-box;背景图片是从border区域开始显示;
background-origin:content-box;背景图片是从内容content区域开始显示;
background-clip (规定背景图片的绘制区域)
默认情况下,是从border区域开始绘制背景。
background-clip:padding-box;
background-clip:content-box;
css3中的多重背景图片
多张背景图片之间用逗号隔开即可;
background: url(“images/1.jpg”) no-repeat left top,url(“images/2.jpg”) no-repeat right top;
*注意点:先添加的背景图片会盖住后添加的背景图片;
建议在编写多重背景时拆开编写。
如:background-image:url(“images/1.jpg”),url(“images/2.jpg”);
background-repeat:no-repeat,no-repeat;
background-position:left top,right top;
当图片的宽度大于父元素的宽度时,如何让图片水平居中?
1.先给父元素设置text-align:center;
2.再给图片设置margin:0 -100%;