css的一些基础属性——背景

前言：通过css属性，可以给页面元素·添加背景样式；背景属性可以设置背景颜色，背景图片，背景平铺，背景图片的位置 背景图片的固定等

目录

三.背景

1.背景颜色

效果展示：

2.背景图片

效果展示：

3.背景平铺

效果展示：

4.背景图片的位置

 效果展示：

 1.当参数位方位名词

 2.参数是精确单位

 3.参数是混合单位

 4.背景图像的固定

效果展示：

 5.背景的复合写法

6.背景颜色半透明

效果展示：

7.总结

谢谢观看！！！              我们下期再见！！！

---

---

三.背景

1.背景颜色

background-color 属性定义了元素的背景颜色

语法：

div {
  background-color: red;
}
  

注： 

• 一般情况下元素背景颜色默认是 transparent（透明色）
• 颜色取值和文本颜色相同

效果展示：

---

2.背景图片

background-image 属性描述过元素的背景图像实际开发常见于logo，一些装饰性图片或超大背景图的制作

语法：

div {
  background-image: url(图片地址)
}

关于地址请参照前面的相对地址和绝对地址

相关属性值：

属性值	说明
none	无背景
url	使用绝对或相对地址指定背景图像

效果展示：

---

3.背景平铺

如果需要在HTML页面上对背景图片进行平铺，可以使用background-repeat属性

平铺：如果背景图片不足以布完整个盒子时，页面会自动复制图片来填满整个盒子

例如：

 语法：

div {
   background-repeat:no-repeat;
}

常用属性值：

属性值	作用
repeat	背景向横向纵向进行平铺（默认值）
no-repeat	背景图片不平铺
repeat-x	在横向上平铺
repeat-y	在纵向上平铺

效果展示：

 注：背景图片和背景颜色可以同时设置，但是背景图片会在背景颜色的上层显示

---

4.背景图片的位置

利用background-position 属性改变图片在背景中的位置

语法：

div{
    background-position: x y;
}

参数代表的意思时：x轴和y轴。可以使用单位名词或者精确单位。

length（精确单位）	百分数 | 小数 |标准单位（px）
position	top（默认） | center | bottom | left（默认） | right

 效果展示：

 或

 1.当参数位方位名词

• 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如：left top和 top left 效果一致
• 如果只指定了一个方位名词，另一个省略，则第二个值默认居中

 2.参数是精确单位

• 如果参数值是精确单位，那么第一个一定是x坐标 另一个一定是y坐标
• 如果只指定一个值那么那个值一定是x坐标，另一个默认垂直居中

 3.参数是混合单位

• 如果指定的两个值是精确单位和方位名词的混合使用，则第一个一定是x坐标，第二个一定是y坐标

 4.背景图像的固定

background-attachment属性设置背景图像是否固定或随着页面其余部分滚动

语法：

div {
    background-attachment: fixed;
}

属性值：

属性值	意义
scroll	背景图像滚动（默认）
fixed	背景图像固定

效果展示：

滚动（srcoll）

 固定（fixed）

---

 5.背景的复合写法

为简化背景属性代码，我们可以将这些属性合并简写到一个background中（顺序自定）

例如：

div {
 background： pink url（） no-repeat fixed left 200px;

}

6.背景颜色半透明

css3中为我们提供了背景颜色半透明效果

例如：

 语法：

div{
  background: rgba(0,0,0,0.3);
}

注意：

• 最后一个参数是透明度，取值范围在0~1之间
• 0.3的0可以去掉我们习惯性写成 .3
• 背景半透明是指盒子背景半透明，对盒子内容不影响

效果展示：

---

7.总结

属性	作用	值
backgroumd-color	背景颜色	预定颜色（red等）| 十六进制（#20202）|    RGB代码（rgba（3，255，3））
background-image	背景图片	url（地址）
background-repeat	背景平铺	repeat | no-repeat | repeat-x | repeat-y
background-position	位置	length | position
background-attachment	固定	scroll | fixed
背景简写	简化书写
半透明		background ：rgba （）

---

谢谢观看！！！              我们下期再见！！！