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

最新推荐文章于 2024-03-01 16:59:08 发布
最新推荐文章于 2024-03-01 16:59:08 发布
阅读量8.9k 收藏 92
点赞数 21
分类专栏： 技术小妙招 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46690660/article/details/108521010
版权

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>

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

清砾
关注
  • 21
    点赞
  • 踩
  • 92
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery+css实现Tab栏切换的代码实例
11-29
前几天面试碰到现场给写一个Tab栏切换的功能，思想基本上懂，但是好久没写过，一时要全部实现效果还真有点难。回来后，再把思路理一理，写一个，基础还是很重要的。 最终要实现的效果图如下： （1）点击tab栏显示对应的内容，并且tab栏样式变化。实现方式：一般tab栏如果要做成比较好看的样式，会切两张图作为背景，一张用于选中时的背景，一张用于未选中的背景。这里为了简单，只用css设置样式。然后为每个tab绑定click事件，当触发click事件时，对应的内容div的display设置block，否则设置为none。 （2）当鼠标悬停在没有选中的tab栏上时，改变样式，移开时又恢复回来的样式。如果t
纯js实现背景图片切换效果代码
12-02
html代码 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>背景切换</title> <link href=”css/bgchage.css” type=”text/css” rel=”Stylesheet” /> </head> <body> <div><ul><li>
css 背景图基础讲解和窗口滚动切换背景图案例
weixin_44565776的博客
03-01 346
主要介绍css 背景图基础知识以及在如何固定背景图，在滚动窗口的时候，背景图无感切换
html与css后阶段搭配使用案例总结
m0_58600635的博客
08-22 188
一、图片精灵 1.图片精灵主要来实现引用一张很大的图片，里面有很多的小图片，但可能只要用到其中的一两个小图片。原理就是把不需要的图片隐藏，展示自己所需要那一两个图片。 2. 如果只想要在页面展示第一列的四张图片，就可以用图片精灵的方法。整张大图片用背景图片的方式插入。 3. 操作步骤：a.首先利用ps，Axure或者其他软件去测量这一列四张图片的坐标和每张小图片的宽高，并标记好。用background-position 进行定位 b.打开vscode创建html文件和css文件，进行链接。 c.
JavaScript（JS）制作网页--点击图片换背景
Dreamer
11-17 1968
JS制作网页–点击图片换背景 网页中有四个图片，点击不同的图片，更换相对应的背景。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景</title>
纯CSS实现图片自动切换，鼠标点击切换相结合
smily_forever的博客
07-06 7012
纯CSS实现图片自动切换，鼠标点击切换相结合 图片自动切换实现原理：使用一个div并设置溢出隐藏来只显示一次一张图片，同时设置另一个div（总图片div），尺寸为所有图片横排的总尺寸宽高，作为动画顺序播放，然后使用css3动画，通过对div（总图片div）进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。5张图片，需要切换4次。 鼠标实现图片切换原理：通过设置每个超链接的宽度高度，并使用position定位到指定位置，编写每一个超链接的动画来分别切换相应图片的位置，使用hover
HTML5点击切换图案背景特效
04-25
HTML5点击切换图案背景特效是一款全屏的无缝圆点图案背景切换特效。
点击图片实现背景的切换
ban__的博客
11-29 1131
实现效果 实现代码 <title>点击图片改变背景图片</title> <style> li { float: left; list-style: none; } li img { width: 100px; height: 100px; margin: 100px auto..
html图片点击切换背景,CSS 实现鼠标指向切换背景图片
weixin_34570507的博客
06-05 628
页头顶部导航点击量： 占比： %较上月同比：%CSS：ul.blue_box{ padding:0px; margin:0px; list-style:none; background:url(../images/blue_box_01.png) no-repeat top center; width:160px; height:105px; padding:25px 0px 0px 20px; ...
html点击切换背景加缩略图,点击缩略图切换背景（纯css3动画）
weixin_40009026的博客
06-09 166
效果.gifhtml结构CSS3 Full Background Slider Hipster Fashion Haircut Cloud Computing Services & ConsultingMy haire is sooo fantastic!Eat healthy & excersice!Lips so kissable I could die ... ...
html多背景图片通过点击改变,点击背景图片_html/css_WEB-ITnose
weixin_32097465的博客
06-09 253
用一个小图片做一个背景，我想监听小图片的点击事件，应该怎么监听。.libiao_menu{ background:url("images/1.gif") no-repeat 0 -41px;}我就想监听这个1.gif图片点击事件。回复讨论(解决方案)可以通过坐标判断模拟没有直接的判断吗？ 通过坐标模拟判断说具体点，谢谢。在图片上放一个透明的标签，大小调成跟图片一样，然后监听这个标签的click事件...
jQuery点击切换背景图片代码
06-01
jQuery点击切换图片，点击背景图片切换代码。
视频背景切换 html+css
02-08
视频背景切换 html+css
HTML5+CSS3背景变色日历表切换代码
06-11
一款非常漂亮的HTML5+CSS3背景变色日历表切换代码，每个月份的日历表背景颜色都不同哦。
CSS3实现的点击按钮背景图片不断切换的JS代码
06-12
CSS3实现的点击图片下方按钮，文字的背景会出现切换效果
html+css+js实现简约大气自适应导航网站+随机壁纸+天气插件源码.zip
05-09
简约大气自适应导航网站+随机壁纸+天气插件 非常好看、简约大气的导航网站，可以自由切换不同的搜索引擎进行内容查找，同时配置了一些常用的网站快捷使用。无环境要求，单纯使用html、css、js，任何服务器或虚拟机都...
html+css+js酷炫全屏的后台登录注册界面模板
最新发布
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，带背景图片自动切换登录注册模板代码，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，...
html+css+jquery小案例：点击超链接切换对应图片
wym123_的博客
07-13 1994
这是自己学习jquery时候做的小案例,来分享给大家。这个案例很简单，就是点击上面的文字，下面的图片会进行变化，可以供新手学习，也防止自己忘记了可以回来看一下：效果图如下（代码中用到的图片来自于京东网页，这里就不分享资源了，可以自行更换）:文件目录如下：里面的jquery.min.js为jquery代码。是官网直接下载过来的，地址如下：https://jquery.com/进入后点击下载 然后选择以下两个其中一个就行了，压缩的代码是挤压的，可以选择没有压缩的，是有格式的。选择一个进行点击，然后全选把代码复制
操作元素实例-百度换图 ：点击图片切换body背景图
热门推荐
qq_41853417的博客
09-23 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> &
火影忍者网页设计html,html+css+js实现火影背景切换登录页面
05-30
好的，为了实现火影忍者的背景切换登录页面，我们需要用到HTML、CSS和JS。首先，我们需要准备好背景图片，这里我选择了几张火影忍者的图片。 接下来，我们可以开始编写代码了。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>火影忍者登录页面</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="bg-img"></div> <div class="container"> <form> <h1>火影忍者登录</h1> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <button type="submit">登录</button> </form> </div> </body> </html> ``` 我们在页面中添加了一个id为“bg-img”的div，用来显示背景图片。我们还添加了一个class为“container”的div，用来包含登录表单。 CSS代码： ```css body { margin: 0; padding: 0; background-color: #000; } #bg-img { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-size: cover; background-position: center; animation: bg-slide 20s infinite; } @keyframes bg-slide { 0% { background-image: url("bg1.jpg"); } 25% { background-image: url("bg2.jpg"); } 50% { background-image: url("bg3.jpg"); } 75% { background-image: url("bg4.jpg"); } 100% { background-image: url("bg5.jpg"); } } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.8); padding: 30px; border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); } h1 { text-align: center; font-size: 32px; margin-bottom: 20px; } input { display: block; width: 100%; padding: 10px; margin-bottom: 20px; font-size: 16px; border: none; border-radius: 5px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); } button { display: block; width: 100%; padding: 10px; background-color: #c9302c; color: #fff; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #a52725; } ``` 在CSS中，我们设置了背景图片的位置、大小和动画。我们使用了@keyframes来实现背景图片的切换，每25%的时间显示一张不同的图片。我们还设置了登录表单的样式，包括位置、颜色、边框和阴影等。 JS代码： ```javascript window.onload = function() { var bgImg = document.getElementById("bg-img"); var bgImgs = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg"]; var index = 0; setInterval(function() { index++; if (index == bgImgs.length) { index = 0; } bgImg.style.backgroundImage = "url(" + bgImgs[index] + ")"; }, 20000); } ``` 在JS中，我们使用了一个定时器来实现背景图片的切换。我们设置了一个数组来存储背景图片的路径，然后每隔20秒就切换一次背景图片。 最后，我们将HTML、CSS和JS保存到同一个文件夹中，然后我们就可以在浏览器中打开这个文件来查看火影忍者的背景切换登录页面了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值