CSS BackGround 属性指南
将CSS中background的各个属性及其对应的值。简写学习方法。
目录
1
• background
• background-image
• background-size
• background-repeat
• background-position
• background-origin
• background-clip
• background-attachment
• background-color
总结
CSS背景(background)属性
CSS背景(background)属性让我们可以控制图像的大小和属性，我们可以以不同大小的屏幕制作响应性强的图像。也就是创建响应式网页。
CSS中的background-image属性
以下语法：
// 图片路径
.container{
background-image: url();
}
通过两种方法使用background-image
通过图像的路径
直接填写文件名
通过具体的图像URL
也就是在URL中填写地址
设置大小和停止图像拉伸
background-size : contain;
background-repeat : no-repeat;
CSS中的background-size属性
例子
// 自动适应
.container{
background-size: cover;
}
有三种使用方法
使用 Cover/Contain 值
设置图像宽度和高度
使用 auto
cover 和 contain 的特点
cover：调整窗口大小的时候，会把图像拉伸到整个屏幕。
contain：调整窗口大小，它的值不会发生改变。
图像宽度和高度
这里考到宽度和高度
background-size: 200px 200px;
auto，图像会保持原来大小，不会随调整窗口大小改变。
CSS中的background-repeat属性
以下语法：
// 图片位置
.container{
background-repeat: repeat;
}
共有6个值
Repeat
Repeat-X
Repeat-Y
No-repeat
Space
Round
Repeat值
使用这个值，我们可以沿用X轴和Y轴重复对应画面多次，直到容器被填充满。
Repeat-X值
使用这个值，容器X轴上重复对应图像，直到X轴被填充满
Repeat-Y值
使用这个值，容器Y轴上重复对应图像，直到Y轴被填充满
No-repeat值
使用这个值，可以禁止图像重复
Space值
使用这个值，对X轴和Y轴都起作用。
Round值
使用这个值，对X轴和Y轴都起作用，在调整窗口大小时注意图像拉伸。注意调整窗口大小，有空的空间。
CSS中的background-position属性
// 更改图片显示位置
.container{
background-position: 200px 200px;
}
还可以使用下面的值组合
Top
Left
Right
Bottom
Percentage values
CSS中的background-clip属性
// 背景的裁剪区域
.container{
background-clip: border-box;
}
确定背景的裁剪区域
其三个值分别为:
Border-box (背景被裁剪到边框盒)
Padding-box (背景被裁剪到内边距框)
Content-box (背景被裁剪到内容框)
CSS中的background-attachment属性
这个属性允许我们在滚动时控制内容和图像的行为
// 滚动时控制内容和图像的行为
.container{
background-attachment: scroll;
}
以下三个值
Scroll
Fixed
Local
其中使用scroll时，像会随着页面的滚动而滚动（这是默认的）。使用 fixed 时图像不会随着页面其余部分的滚动而移动，在屏幕中是固定的。而 local 会随着元素内容的滚动而滚动，直到滚动到内容结束。
CSS中的background-color属性
// 背景颜色
.container{
background-color: aqua;
}
使用这个属性填充背景颜色，使用较多的三个值，通过名称或者十六进制值对应颜色，使用RGB()颜色函数，使用linear-gradient()函数，使用名称设置纯色背景
// 纯色背景
.container{
background-color: red;
height: 100vh;
}
也可以，使用十六进制来设置颜色
// 十六进制设置颜色
.container{
background-color: #fff;
height: 100vh;
}
还可以使用RBG()函数设置背景颜色
// RBG()函数设置背景颜色
.container{
background-color: rgb(red, green, blue);
height: 100vh;
}
还可以使用RBGA()函数设置背景颜色和透明度
// Opacity：0.6是60%透明度
.container{
background-color: rgba(red, green, blue, 0.6);
height: 100vh;
}
最后可以通过多种颜色的组合完成一个渐变色，使用rgb(24, 250, 242)左边的颜色，#b42dfd右边的颜色。45deg通过两种颜色的梯度创建一个渐变。
// An highlighted block
.container{
background: linear-gradient(45deg,rgb(24, 250, 242),#b42dfd);
height: 100vh;
}