用纯CSS+HTML实现图片点击切换背景

最新推荐文章于 2023-08-10 17:40:27 发布

清砾

最新推荐文章于 2023-08-10 17:40:27 发布

阅读量9.7k

点赞数 22

分类专栏：技术小妙招文章标签： css html

本文链接：https://blog.youkuaiyun.com/m0_46690660/article/details/108521010

版权

技术小妙招专栏收录该内容

20 篇文章

订阅专栏

1.实现了点击圆图片，切换对应的背景图片
2.主要技术：css3的背景设置，边框圆角，定位，盒模型，选择器，浮动，锚点，由:target实现切换
一、效果图如下
在这里插入图片描述
二、代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>图片背景切换</title>
		<link rel="shortcut icon" type="image/x-icon" href="img/an.ico"/>
		<style type="text/css">
			/*样式初始化*/
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			/*去除横向滚动条*/
			body {
				overflow-x: hidden;
			}
			/*将div铺满整个窗口*/
			.box {
				height: 100vh;
				min-height: 520px;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
			/*设置大ul的大小及定位*/
			.content {
				position: relative;
				width: 100%;
				height: 100%;
			}
			/*设置大li样式*/
			.content li {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-position: center;
				background-clip: border-box;
				background-size: cover;
			}
			/*将第一张图片后的图片隐藏*/
			#li1~li{display: none;}
			/*设置大li背景图片*/
			#li1 {background-image: url(img/bg1.jpg);}
			#li2 {background-image: url(img/bg2.jpg);}
			#li3 {background-image: url(img/bg3.jpg);}
			#li4 {background-image: url(img/bg4.jpg);}
			#li5 {background-image: url(img/bg5.jpg);}
			/*点击a标签,切换大图片*/
			#li1:target,
			#li2:target,
			#li3:target,
			#li4:target,
			#li5:target{
				display: block;
			}
			/*定位*/
			.conlist {
				position: absolute;
				bottom: 0;
			}
			/*设置li的样式*/
			.conlist li {
				position: relative;
				float: left;
				width: 180px;
				height: 150px;
				display: block;
				border: 3px solid #fff;
				border-radius: 10px;
				margin-right: 10px;
				text-align: center;
			}
			/*给li设置背景颜色*/
			.conlist li:first-child {background: #00ff00;}
			.conlist li:nth-child(2) {background: #00ff00;}
			.conlist li:nth-child(3) {background: #66FF00;}
			.conlist li:nth-child(4) {background: #990000;}
			.conlist li:last-child {background: #FF6633;}
			/*设置a标签的样式*/
			.conlist a {
				position: absolute;
				display: block;
				width: 145px;
				height: 145px;
				border: 3px solid #fff;
				border-radius: 75px;
				background-position: center;
				background-clip: border-box;
				background-size: cover;
				left: 10%;
				top: -50%;
			}
			/*设置a标签的背景图片*/
			.a1 {background-image: url(img/sbg1.jpg);}
			.a2 {background-image: url(img/sbg2.jpg);}
			.a3 {background-image: url(img/sbg3.jpg);}
			.a4 {background-image: url(img/sbg4.jpg);}
			.a5 {background-image: url(img/sbg5.jpg);}
			/*设置字体样式*/
			.conlist span {
				line-height: 220px;
				font-family: "黑体";
				font-size: 30px;
				color: #fff;
				font-weight: bold;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<ul class="content">
				<li id="li1"></li>
				<li id="li2"></li>
				<li id="li3"></li>
				<li id="li4"></li>
				<li id="li5"></li>
			</ul>
			<ul class="conlist">
				<li><a href="#li1" class="a1"></a><span>第一张</span></li>
				<li><a href="#li2" class="a2"></a><span>第二张</span></li>
				<li><a href="#li3" class="a3"></a><span>第三张</span></li>
				<li><a href="#li4" class="a4"></a><span>第四张</span></li>
				<li><a href="#li5" class="a5"></a><span>第五张</span></li>
			</ul>
		</div>
	</body>

</html>

需要的同学图片自己更换；