背景
在
CSS3中针对Background推出了多个新增的用法,接下来我们看看这些新的属性
新增属性
部分是有修改的,部分是新增的,其中CSS3中新增了很多好用的属性
backGroundCSS3新增属性
backGround-clip:
- 将背景设置好后,通过这个属性可以把多余的背景切掉
background-size
- 设置背景图片的大小,通过这个属性可以使用多张图片作为背景,关于如何设置多张图片,可以查看
多重背景
/* 支持直接指定具体的大小 */
/* 宽度10 高度根据宽度计算 */
background-size: 10px;
/* 宽度10 高度 10 */
background-size: 10px 10px;
/* 背景图片原始大小 */
background-size: auto;
/* 背景图片原比例缩放到完全填满 可能会超出 */
/* cover 直接等比例放大图片,直到两边都顶格.如果图片由于比例问题出现超出范围的情况,会出现图片缺失的问题,因为出去的图片会被切掉*/
background-size: cover;
/* 背景图片原比例缩放到 高度 或者宽度 跟容器一样 可能会有空白 */
/* contain 等比例放大,某一边顶格 立刻停止放大*/
background-size: contain;
/*连写时加`/` 例如:background: 图片 repeat 位置 /大小 */
background-repeat
- 在原来只能设置平铺,不平铺的基础上,增加了两个属性,让我们在设置背景图时更为灵活
- 示例:
/* 自动缩放 直到填满 */
background-repeat:round;
/* 两个方法都缩放,直到某一边充满容器为止 */
background-repeat:space;
background-origin
这个属性设置的是背景图片开始的位置
-
核心代码如下:
下面只列举了div的样式
div{
background-image:url('img/01.jpg');
background-repeat: no-repeat;
background-size: 50px 50px;
background-origin:可选值为border-box,padding-box,content-box
}
- border-box: 从边框边线的位置开始
border-box
- padding-box 从padding开始
padding-box
- content-box 从内容开始
content-box
- 复合写法 直接 在末尾 添加 background-origin 属性即可
background: url('img/lkw.jpg')no-repeat center/ cover content-box;
多重背景
background这个属性在CSS1中就推出了，在CSS3中经过修改，可以通过逗号,的方式添加多个背景。
background 在设置背景的时候 对于 过渡属性transition的支持 较差
语法
background是复合属性,可以添加多个值,编写的时候需要注意顺序
- 语法:
/* 复合写法 */
background:url(图片地址) 填充方式 固定方式 位置/大小 显示原点 裁剪位置 背景颜色.
/* 多图片 使用逗号分隔*/
background:图片1,
图片2,
图片3.
/* 具体代码 */
background: url('image/01.jpg') no-repeat 200px 300px,
url('image/02.jpg') no-repeat 100px 200px/100px 100px;
