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

1. 学习内容概述

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

2. 背景属性知识点

2.1. 颜色 background-color

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

<style>标签下：

<!-- 以下四种颜色定义方式任选其一即可 -->
.myclass{background-color: red;}
.myclass{background-color: #ff0000;}
.myclass{background-color: rgb(255,0,0);}
.myclass{background-color: rgba(255,0,0,0.3);}

<body>标签下：

<div class="myclass"></div>

则该元素背景颜色按照<style>标签下定义的颜色填充。

2.2. 图片 background-image

<style>标签下

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

❗ 背景图片的显示方式：

图片大小>元素大小：默认显示图片左上角，填充满整个元素；
图片大小<元素大小：默认图片水平、垂直居中于元素内。

2.3. 图片大小 background-size

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

background-size参数	图片大小显示效果
cover	保持图片纵横比，并完全填充元素
contain	保持图片纵横比，并适合元素
（自定义）	- 像素 - 百分比

.myclass2{background-size: 300px 500px}   <!-- 像素 -->
.myclass3{background-size: 80% 50%}   <!-- 百分比 -->

2.4. 图片位置 background-position

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

2.4.1. 九宫格定点法

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

left top	center top	right top
left center	center center	right center
left bottom	center bottom	right bottom

.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

background-repeat参数	图片填充方式
no-repeat	图片在元素内不填充
repeat	图片重复出现，横、纵向填满元素
repeat-x	图片重复出现，横向填满元素
repeat-y	图片重复出现，纵向填满元素

标签