8、背景属性（背景颜色属性）
nanyue 2024-07-25 05:42:46 技术文章 11 ℃
背景属性
常用属性
属性值解释background-colorred背景颜色background-imageurl(“”)背景图片background-repeatrepeat;no-repeat;repeat-x;repeat-y图像平铺;不平铺;按x轴平铺;按y轴平铺background-positionunset;left;right;center;top;bottom;20px背景定位、对齐方式，靠上层边框的位置，如果只写一个值，其他值值默认居中background-attachmentfixed;scroll背景浮动，如果页面元素过多有上下拉条就这个参数就可以定义是否跟随拉条一起浮动background-sizelength/percentage/cover/containlength：设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为 “auto”。
percentage：以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为 “auto”。
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
background-color
<style type="text/css">
div {
height: 200px;
background-color: darkgray;
}
</style>
</head>
<body>
<div></div>
</body>
background-image
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div {
height: 300px;
background-image: url("http://fc.topitme.com/c/46/4b/11204201334c04b46cl.jpg");
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-repeat
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div {
height: 300px;
background-color: darkgray;
background-image: url("http://fc.topitme.com/c/46/4b/11204201334c04b46cl.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-position
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div {
height: 300px;
background-color: darkgray;
background-image: url("http://fc.topitme.com/c/46/4b/11204201334c04b46cl.jpg");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-attachment
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div {
background-color: darkgray;
background-image: url("http://fc.topitme.com/c/46/4b/11204201334c04b46cl.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<div>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
<p>北京马哥教育</p>
</div>
</body>
</html>
对齐案例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
a {
display: inline-block;
width: 67px;
height: 32px;
background-image: url("110.png");
}
a:hover {
background-image: url("110.png");
background-position: bottom;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
- 注意：background-image作为背景图片，可以超过div盒子的大小，background-position只是一个对齐方式，如果设置background-position为top，那么图标的上边框将和盒子的上边框对齐，如果为botton那么图标的底边框将和盒子的底边框对齐，超过部分忽略不计。
五彩导航
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div {
height: 50px;
text-align: center;
font-size: 0px;
}
a {
display: inline-block;
width: 120px;
height: 58px;
line-height: 50px;
text-decoration: none;
color: crimson;
font-size: 16px;
}
.a1 {
background-image: url("bg1.png");
}
.a1:hover {
background-image: url("bg2.png");
}
.a2 {
background-image: url("bg3.png");
}
.a2:hover {
background-image: url("bg4.png");
}
.a3 {
background-image: url("bg5.png");
}
.a3:hover {
background-image: url("bg6.png");
}
.a4 {
background-image: url("bg7.png");
}
.a4:hover {
background-image: url("bg2.png");
}
</style>
</head>
<body>
<div>
<a href="#" class="a1">五彩导航</a>
<a href="#" class="a2">五彩导航</a>
<a href="#" class="a3">五彩导航</a>
<a href="#" class="a4">五彩导航</a>
</div>
</body>
</html>
