纯CSS实现背景图片切换(CSS3伪类实现背景图片切换)

最新推荐文章于 2024-05-30 16:41:47 发布

做一个有知识的流氓

最新推荐文章于 2024-05-30 16:41:47 发布

阅读量2.9w

点赞数 15

分类专栏： HTML+CSS3 文章标签： CSS3 前端 html 伪类

本文链接：https://blog.csdn.net/qq_36370731/article/details/78143436

版权

HTML+CSS3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

跟着慕课网的教程学习了一下伪类，然后试着练习了一下用CSS伪类来实现背景图片切换。

先上一下效果图，当我点击圆圈里的缩略图的时候，背景图片就会变为与缩略图一样的图片。

要用到的伪类及其作用有：

1、nth-of-type()给每个文字块设置不同颜色。

2、::after 添加圆形缩略图的div

3、nth-of-type()配合::after添加缩略图

4、 ::befor 给圆形缩略图添加一个阴影遮罩层

5、:hover 鼠标移上时去除遮罩层的阴影

6、:target 进行背景图片切换

7、not()配合:target 设置其他非背景图片的层级，来达到非背景图片隐藏的效果

下面上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="CSS3伪类练习.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="nav">
	<ul>
      <li><a href="#bg1" ><br/><br/><p>人丑就要多读书</p></a></li>
      <li><a href="#bg2" ><br/><br/><p>人丑就要多读书</p></a></li>
       <li><a href="#bg3" ><br/><br/><p>人丑就要多读书</p></a></li>
       <li><a href="#bg4" ><br/><br/><p>人丑就要多读书</p></a></li>
       <li><a href="#bg5" ><br/><br/><p>人丑就要多读书</p></a></li>
    </ul>
   
    <img src="2.jpg" alt="#" class="bg bga2" id="bg2"/>
    <img src="3.jpg" alt="#" class="bg bga3" id="bg3"/>
    <img src="4.jpg" alt="#" class="bg bga4" id="bg4"/>
    <img src="5.jpg" alt="#" class="bg bga5" id="bg5"/>
    <img src="1.jpg" alt="#" class="bg bga1" id="bg1"/>
    <!--之所以将第一张图片放在最后面是为了让它在打开页面时第一张显示-->
</div>
</body>
</html>

ul{list-style:none}
a{color:#000;
text-decoration:none;
}
/*设置背景图片全屏居中显示*/
img.bg{
	 min-height: 100%;
            min-width: 1024px;
            width: 100%;
            height: auto !important;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index:1;}
.nav{width:1000px;height:100px;margin:500px auto;}
/*预览块样式*/
.nav ul li {
	position:relative;
	float:left;
	width:130px;
	height:120px;
	background-color:#00C;
	margin-right:50px;
	z-index:777;
}
/*设置不同的列表色*/
.nav ul li:nth-of-type(1){
	background-color:#0F3;}
.nav ul li:nth-of-type(2){
	background-color:#939;}
.nav ul li:nth-of-type(3){
	background-color:#F9C;}
.nav ul li:nth-of-type(4){
	background-color:#FF0;}
.nav ul li:nth-of-type(5){
	background-color:#06F;}				
/*缩略图样式*/
.nav ul li a::after{
	content:"";
	width:100px;
	height:100px;
	display: block;
	position:absolute;
	bottom:80px;left:15px;
	border:#FFF solid 2px;
	border-radius: 50%;
	z-index:888;
}
/*缩略图图片*/
.nav ul li:nth-of-type(1) a::after{
	background:url(1.jpg) no-repeat center;}
.nav ul li:nth-of-type(2) a::after{
	background:url(2.jpg) no-repeat center;}
.nav ul li:nth-of-type(3) a::after{
	background:url(3.jpg) no-repeat center;}
.nav ul li:nth-of-type(4) a::after{
	background:url(4.jpg) no-repeat center;}
.nav ul li:nth-of-type(5) a::after{
	background:url(5.jpg) no-repeat center;}
/*设置缩略图遮罩层*/	
.nav ul li a::before{
	content:"";
	width:100px;
	height:100px;
	display: block;
	position:absolute;
	background: rgba(0,0,0,0.3);
	bottom:80px;left:15px;
	border:#FFF solid 2px;
	border-radius: 50%;
	z-index:99999;
}				
.nav ul li a:hover::before{
	background: rgba(0,0,0,0);
}
/*背景图片切换*/
.bga1:target{
	z-index:100;
	}
.bga2:target{
	z-index:100;
	}
.bga3:target{
	z-index:100;
	}	
.bga4:target{
	z-index:100;
	}
/*设置其他图片隐藏*/
.bg:not(:target){
	z-index:1;
}

做一个有知识的流氓

关注

15
点赞
踩
79

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现背景图片切换(CSS3伪类实现背景图片切换)

跟着慕课网的教程学习了一下伪类，然后试着练习了一下用CSS伪类来实现背景图片切换。先上一下效果图，当我点击圆圈里的缩略图的时候，背景图片就会变为与缩略图一样的图片。要用到的伪类及其作用有：1、nth-of-type()给每个文字块设置不同颜色。2、::after 添加圆形缩略图的div3、nth-of-type()配合::after添加缩略图4、 ::befor 给圆形缩
复制链接

扫一扫