CSS利用background设计彩虹导航栏&与hover的用法_收货地址css 彩虹条怎么设置-CSDN博客

本文链接：https://blog.csdn.net/egg_er/article/details/120889141

五彩导航栏制作：

项目需要的文件：十张背景图片

要求：

设计五个五彩导航；
利用到background的知识
利用hover伪元素达到切换背景的效果；

创建根目录:
在这里插入图片描述
准备十张图片：在这里就不放入那么多了；
请添加图片描述
HTML结构：

// 利用五个a超链接
<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
    <a href="#" class="five">五彩导航</a>
</body>

CSS样式：

a {
    display: inline-block;    // 将元素转化为行内块
    width: 120px;
    height: 58px;
    color: antiquewhite;
    background-color: rebeccapurple;   // 将背景颜色设置一下因为文字是透明色 ，如果不设置就看不到文字了，后期背景图图片插入以后可以再把这个元素注释掉就行，当然也可以不注释，原因是：背景图片的层级比背景颜色层级高。会盖住背景颜色；
    text-decoration: none;   // 去除超链接的下划线
    line-height: 54px;
    text-align: center;
}

.one {
    background: antiquewhite url(../images/bg1.png) no-repeat;   // 插入第一个超链接一个背景图片，并且背景不重复。
}

.one:hover {
    background-image: url(../images/bg11.png);   // 鼠标移入超链接a，会显示另外一张图片；
}

.two {
    background: antiquewhite url(../images/bg2.png) no-repeat;
}

.two:hover {
    background-image: url(../images/bg22.png);
}

.three {
    background: antiquewhite url(../images/bg3.jpg) no-repeat;
}

.three:hover {
    background-image: url(../images/bg3.png);
}

.four {
    background: antiquewhite url(../images/bg4.png) no-repeat;
}

.four:hover {
    background-image: url(../images/bg2.png);
}

.five {
    background: antiquewhite url(../images/bg5.png) no-repeat;
}

.five:hover {
    background-image: url(../images/bg11.png);
}

总结：以上就是五彩导航栏的制作。利用到了行内块的性质，background的相关属性，以及hover的相关用法；

积小流，汇江河，脚踏实地加油干。一只自学前端的兔子。
在这里插入图片描述