CSS background背景
2021-06-21 本文已影响0人
微语博客
CSS背景属性
CSS背景属性用于设置HTML元素的背景（填充），复合属性 background 可以用来设置背景颜色，图片，定位，大小，重复等属性，设置某一项属性时我们单独设置；
CSS常用的属性：
- background-color：设置背景颜色，值为CSS颜色。
- background-image：设置背景图片，值为图片的url。
- background-repeat：设置背景图片是否重复排列，常用值no-repeat不重复。
- background-attachment：背景图像是否固定或者随着页面的其余部分滚动。
- background-position：背景图像的定位（起始位置）。
复合属性background
background复合属性用于设置上面常用的五个属性，background-color，background-image，background-repeat，background-attachment，background-position。值为依次五个属性，但无需全部使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
background: url('img/bg.jpeg') no-repeat fixed center;
/*背景属性设置了一张背景图片 不重复 固定图像 居中排列*/
}
</style>
</head>
<body>
<div>Hello World!</div>
</body>
</html>
背景属性
以下为各添加CSS版本的背景属性
| 属性 | 描述 | CSS |
|---|---|---|
| background | 复合属性，设置对象的背景特性。 | 1 |
| background-attachment | 设置或检索背景图像是随对象内容滚动还是固定的，必须先指定background-image属性。 | 1 |
| background-color | 设置或检索对象的背景颜色。 | 1 |
| background-image | 设置或检索对象的背景图像。 | 1 |
| background-position | 设置或检索对象的背景图像位置，必须先指定background-image属性。 | 1 |
| background-repeat | 设置或检索对象的背景图像如何铺排填充，必须先指定background-image属性。 | 1 |
| background-clip | 指定对象的背景图像向外裁剪的区域。 | 3 |
| background-origin | 设置或检索对象的背景图像计算background-position时的参考原点(位置)。 | 3 |
| background-size | 检索或设置对象的背景图像的尺寸大小。 | 3 |
部分属性在IE浏览器中需要兼容，而且在主流浏览器中也会有显示差异。
