五、背景相关属性

一）背景颜色

属性名: background - color ( bgc )

属性值: 颜色取值:关键字、 rgb 表示法、 rgba 表示法、十六进制…….

注意点:

背景颜色默认值是透明: rgba (0,0,0,0)、 transparent
背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色

二）设置透明：

opacity；在父级里面设置的话，其子级里面的背景色自动会继承此透明度，包括文字。

三）插入背景图片

属性名: background - image

属性值: background - image : url (＇图片的路径＇)

div{background-image : url("./imgs/1.jpg")

注意点:

背景图片中 url 中可以省略引号,但最好加上；
背景图片默认是在水平和垂直方向平铺的；
背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子的

四）图片平铺效果

1.默认情况，重复（水平+垂直方向）

background-repeat：repeat；

2.取消重复

background-repeat：on-repeat；

3.只有水平方向重复

background-repeat：repeat-x；

4.只有垂直方向重复

background-repeat：repeat-y；

五）调整图片位置

1.使用方位值调整位置（左右是相对于浏览器窗口而不是父元素)

background-position: right bottom；

(left/right)“空格”(top/bottom)

（左上/左下/右上/右下）

2.使用数值调整位置

background-position:20px 50px

六）控制背景图尺寸

1.通过长度值：

background-size:300px px;

2.通过百分比：

background-size:80% 50%（前一个数值控制宽度，第二个值控制高度）

background-size:80%（只有一个数值时默认为高宽等比例放大缩小）

3.通过关键字：

background-size:contain（等比例缩放背景图，但不会超过盒子）

background-size：cover（等比例缩放，尽可能缩放背景图，直到盒子占满，背景图超出部分不可见

七）控制背景图片附着情况

background-attachment: scroll；（默认值，图片随页面滚动而移动）

background-attachment: fixed;（图片位置固定，不随页面滚动而移动，滚动时超出页面部分会被隐藏覆盖）

八）属性简写

background：color url（）repeat position attached/width height；

background： url（） no-repeat 20px 40px；background-size：200px 400px；

属性名: background ( bg )

属性值:单个属性值的合写,取值之间以空格隔开

书写顺序: 推荐: background : color image repeat position

省略问题: *可以按照需求省略 *特殊情况:在 pc端,如果盒子大小和背景图片大小一样,此时可以直接写 background :url（）

注意点 *如果需要设置单独的样式和连写

①要么把单独的样式写在连写的下面

②要么把单独的样式写在连写的里面

九） img 标签和背景图片的区别

需求:需要在网页中展示一张图片的效果?

方法一:直接写上 img 标签即可

*img 标签是一个标签,不设置宽高默认会以原尺寸显示

方法二: div 标签+背景图片

*需要设置 div 的宽高,因为背景图片只是装饰的 CSS 样式,不能撑开 div 标签

十）图片拼合技术 sprite（雪碧图）

制作步骤：

定视口；宽&高
插图片；
调整位置