【Web前端学习笔记】-CSS3-背景属性(background)

目录

1. 学习内容概述

2.  背景属性知识点

2.1. 颜色   background-color

2.3. 图片大小   background-size

2.4. 图片位置   background-position

2.4.1. 九宫格定点法

2.4.2. 像素

2.4.3. 百分比

2.5. 图片填充方式   background-repeat

1. 学习内容概述

• 学习了 CSS3 中有关背景属性的五大知识点，包括：
  • 颜色   background-color
  • 图片   background-image
  • 图片大小   background-size
  • 图片位置   background-position
  • 图片填充方式   background-repeat

2.  背景属性知识点

2.1. 颜色   background-color

颜色主要有 四种 表示方式，即：名称 （如 red）， 十六进制（如 #ff0000），RGB，RGBA（A 代表透明度）。示例如下：

.myclass{background-color: red;}
.myclass{background-color: #ff0000;}
.myclass{background-color: rgb(255,0,0);}
.myclass{background-color: rgba(255,0,0,0.3);}

标签下：

 则该元素背景颜色按照

2.2. 图片   background-image

.myclass2{background-image: url("图片路径");}

❗ 背景图片的显示方式：

• 图片大小>元素大小：默认显示图片左上角，填充满整个元素；
• 图片大小

2.3. 图片大小   background-size

颜色主要有 四种 表示方式，即：名称 （如 red）， 十六进制（如 #ff0000），RGB，RGBA（A 代表透明度）。示例如下：

.myclass2{background-size: 300px 500px}   
.myclass3{background-size: 80% 50%}   

2.4. 图片位置   background-position

• 图片默认位置：左上角
• 背景图片的位置定义主要有三种：九宫格定点法、像素、百分比。

2.4.1. 九宫格定点法

• 红色：左、中、右
• 蓝色：上、中、下

.myclass3{background-position: center top;}   

2.4.2. 像素

x% y%，其中 x% 代表水平位置，y% 代表垂直位置。

.myclass3{background-position: 40% 60%;}

2.4.3. 百分比

 xpx ypx，其中 xpx 代表水平位置，ypx 代表垂直位置。

.myclass3{background-position: 40px 60px;}

2.5. 图片填充方式   background-repeat