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

1.实现了点击圆图片,切换对应的背景图片
2.主要技术:css3的背景设置,边框圆角,定位,盒模型,选择器,浮动,锚点,由:target实现切换
一、效果图如下

二、代码如下:


<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>

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

你可能感兴趣的:(每天记录一个小技巧,css,html)