目录
1 内容预览
背景颜色
背景图片
背景平铺
背景图片位置(常用)
背景图像固定
背景复合写法
背景色半透明
实现案例
1 内容预览
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
注意：
把表格中的五个属背下来，然后写一下练习关于css的背景属性应该就有大概的了解了，但还是的在实践中加深巩固。
背景颜色
背景图片
背景平铺
背景图片位置(常用)
1. 参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2. 参数是精确单位
如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3. 参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
背景图像固定
背景复合写法
背景色半透明
实现案例
案例1：五彩导航栏
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav a {/* 设置成块级行内元素 */display: inline-block;width: 120px;height: 58px;/* 去掉下划线 */text-decoration: none;color: #fff;/* 水平居中*/text-align: center;/* 单行垂直对齐 */line-height: 50px;}.nav .bg1 {background-image: url(images/bg1.png);}.nav .bg1:hover {background-image: url(images/bg11.png);}.nav .bg2 {background-image: url(images/bg2.png);}.nav .bg2:hover {background-image: url(images/bg3.jpg);}.nav .bg3 {background-image: url(images/bg3.jpg);}.nav .bg3:hover {background-image: url(images/bg22.png);}.nav .bg4 {background-image: url(images/bg4.png);}.nav .bg4:hover {background-image: url(images/bg1.png);}.nav .bg5 {background-image: url(images/bg5.png);}.nav .bg5:hover {background-image: url(images/bg3.png);}</style></head><body><div class="nav"> <a href="#" class="bg1">五彩导航</a><a href="#" class="bg2">五彩导航</a><a href="#" class="bg3">五彩导航</a><a href="#" class="bg4">五彩导航</a><a href="#" class="bg5">五彩导航</a></div>
</body></html>案例2：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 176px;height: 53px; /* 添加背景图片 */background-image: url(images/icon.png); /* 不平铺 */background-repeat: no-repeat;background-position: 0 center;/* 文字垂直居中 */line-height: 53px;color: #000;/* 文字不加粗 */font-weight: 400;font-family: '微软雅黑';font-size: 14px;/* 文字悬挂1.5个字符 */text-indent: 1.5em;}</style>
</head>
<body><div>成长守护平台</div>
</body>
</html>
