CSS3之背景

背景

在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;