背景
给元素添加背景样式
还可以设置背景颜色、背景图片（教练我要学这个）、背景平铺、背景图片位置、背景图像固定
背景颜色
这个我们用过，就是：
a {background-color: hotpink;
}一般默认值是transparent，也就是透明；我们也可以手动把有颜色的设置成透明色
背景图片
描述元素的背景图像，一般在做一些小logo或装饰性的图片或者超大的背景图片会用到，比平常的插入图片可以更好的控制位置
.img {width: 300px;height: 300px;background-image: url(../微信图片_20241106131133.png);
}这样实现的是平铺效果：
默认也是none
背景平铺
控制我们背景平铺的效果
可以看这个手册CSS 背景重复
.img {width: 300px;height: 300px;background-image: url(../微信图片_20241106131133.png);background-repeat: no-repeat;
}no-repeat，这样就不是平铺了，一般默认都是平铺的（repeat）
沿着x轴平铺：
.img {width: 300px;height: 300px;background-image: url(../微信图片_20241106131133.png);/* background-repeat: no-repeat; */background-repeat: repeat-x;
}
沿着y平铺：
.img {width: 300px;height: 300px;background-image: url(../微信图片_20241106131133.png);/* background-repeat: no-repeat; */background-repeat: repeat-y;
}
背景图片和背景颜色其实可以并存的，但是图片会盖在背景颜色上：
.img {width: 300px;height: 300px;background-image: url(../微信图片_20241106131133.png);background-color: dodgerblue;background-repeat: no-repeat;
}
背景位置
关于图片的位置有两种参数，一种是方位名词，比如left啊top啊这种，这种叫方位名词
方位名词
.img {width: 300px;height: 300px;background-image: url(../微信图片_20241106131133.png);background-color: dodgerblue;background-repeat: no-repeat;background-position: center top;
}
center top和top center是没有区别的，毕竟中间的上面也就是上面的中间
再写个别的：
.img {width: 300px;height: 300px;background-image: url(../微信图片_20241106131133.png);background-color: dodgerblue;background-repeat: no-repeat;background-position: bottom right;
}
如果只指定了一个方位词，另一个方位词默认是center，也就是居中。例如
background-position:bottom ==bottom center，底部中间
background-position:left ==left center，左侧中间
做一个小图标：
.css:
h3 {width: 200px;height: 40px;line-height: 40px;background-image: url(../微信图片_20241106131133.png);/* background-color: dodgerblue; */background-repeat: no-repeat;background-position: left center;font-size: 14px;font-weight: 400;text-indent: 2em;
}
.html:
<!-- emmet语法 -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="1110.css">
</head><body><h3 class="img">当0当1都不如当3来得刺激</h3>
</body></html>
做一个大背景：
body {/* width: 10000px; 这样调不了宽度*/background-size: cover;background-image: url(../lofter_1666024992076.jpg);background-repeat: no-repeat;background-position: center top;}可以上下滑动
精确单位
精确单位就是x是多少px，y方向是多少px
第一个是x方向，第二个是y方向
background-position: 10px 10px;歪了（悲）
同样，如果只写一个值，则默认这个值是x的值。y默认为center
混合使用
俩都用，当背景图片某一部分需要空出来的时候，就需要这样
body {/* width: 10000px; 这样调不了宽度 */background-size: cover;background-image: url(../lofter_1666024992076.jpg);background-repeat: no-repeat;background-position: center 50px;}
背景固定（背景附着）
两个参数：
background-attachment: fixed/scroll;fix:固定scroll:随着对象内容滚动
复合写法
把这五个合并为一个属性：background
实际开发更常用这种写法
body {background: black url(../lofter_1666024992076.jpg) no-repeat fixed center top ;
}加上cover就不行了，因为background-size不能写进去，否则会失效，只能写外面
body {background: black url(../lofter_1666024992076.jpg) no-repeat fixed center top cover;}//这样不行body {background: url(../lofter_1666024992076.jpg) no-repeat fixed center top;
}body {background-size: cover;
}//这样就可以了背景色半透明
使用rgba来设置背景的透明度：
body {/* background-size: cover; */background: rgba(0, 0, 0, 0.5);
}盒子里的内容不受影响，只是背景的颜色的透明度变了
一个练习：
.css
.nav a {display: inline-block;background-color: cornflowerblue;width: 128px;height: 70px;text-align: center;line-height: 60px;text-decoration: none;background-image: url(微信图片_20241111140336.jpg);background-size: cover;
}.nav .name1:hover {background-image: url(微信图片_20241112165108.jpg);
}.nav .name2:hover {background-image: url(微信图片_20241112165108.jpg);
}.nav .name3:hover {background-image: url(微信图片_20241112165108.jpg);
}.nav .name4:hover {background-image: url(微信图片_20241112165108.jpg);
}.nav .name5:hover {background-image: url(微信图片_20241112165108.jpg);
}.html:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="demo4.css">
</head><body><div class="nav"><a href="#" class="name1">五彩导航</a><a href="#" class="name2">五彩导航</a><a href="#" class="name2">五彩导航</a><a href="#" class="name2">五彩导航</a><a href="#" class="name2">五彩导航</a></div>
</body></html>
