0基础学习网页结构编程

目录

一、背景属性

1、添加背景色

2、添加背景图片

3、图片虽小于盒子，但我只要一张

4、调整背景图片在元素中的位置

5、background-cilp设置背景色的范围

6、background-origin

7、background-size设置图片大小

8、background简写

---

一、背景属性

1、添加背景色

background-color:;

2、添加背景图片

background-img：url（）；
url（）指向图片引入的路径
如果引入的图片小于盒子，图片默认会铺满
如果引入的图片大于盒子，图片默认显示的是左上角

3、图片虽小于盒子，但我只要一张

backgroun-repeat：no-repeat；
可选值：
repeat          铺满
no-repeat   不铺满，一张
repeat-x      水平方向平铺
repeat-y      垂直方向平铺

4、调整背景图片在元素中的位置

background-position：；
参数：参数之间空格隔开
参数1    水平方向位置
参数2     垂直方向位置
例background-position：left bottom；左下角

写法一：left，right，top，bottom，center通过这几个方位词来调整图片的位置；
注意：参数2不写的话默认是center

写法二：直接写大小
background-position：100px 100px；
注意：参数2不写的话默认是center

5、background-cilp设置背景色的范围

可选值：
border-box     默认值，背景色出现在边框下面
padding-box   背景色出现在内边距和内容区
content-box    背景色出现在内容区

6、background-origin

设置背景图片的偏移量计算的原点，配合偏移量使用
可选值：
padding-box   默认值，内边距最外面为原点
conten-box     以内容区为原点
border-box     以边框为远端

7、background-size设置图片大小

参数：
第一个值：宽度
第二个值：高度
如果只写第一个，第二个auto，图片自适应大小

cover      图片比例不变，元素铺满
contain   图片比例不变，图片完整显示

8、background简写

~通过该属性可以同时设置所有背景相关的样式

~没有顺序的要求，谁在前后都行
也没有数量的要求，不写的样式就是默认值

~size要写在position后面