五、背景相关属性

·  阅读 63
五、背景相关属性

五、背景相关属性

一)背景颜色

属性名: background - color ( bgc )

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

注意点:

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

二)设置透明:

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

三)插入背景图片

属性名: background - image

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

div{background-image : url("./imgs/1.jpg")
复制代码

注意点:

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

四)图片平铺效果

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(雪碧图)

制作步骤:

  1. 定视口;宽&高
  2. 插图片;
  3. 调整位置
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改