多张小图拼接为一张大图进行模糊图片切换

最新推荐文章于 2025-03-30 13:23:57 发布

树洞菇凉

最新推荐文章于 2025-03-30 13:23:57 发布

阅读量823

点赞数

分类专栏： javaScript css3 html5 文章标签： js html css

本文链接：https://blog.csdn.net/qq_37916164/article/details/107911573

版权

本文介绍了如何通过CSS的filter属性结合blur效果，将多张小图片拼接成一张大图，并实现图片的模糊切换。在实际应用中，这种方法可以创建出视觉独特的图像展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：效果图如下：
在这里插入图片描述

2：
filter 定义了元素(通常是)的可视效果
blur(px)给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0

代码如下:

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<style>
		body {
   
			background: rgb(1, 4, 8);
		}

		* {
   
			margin: 0;
			padding: 0;
		}

		.wrapper {
   
			width: 100%;
			padding-top: 79px;
			/* overflow: hidden; */
			position: absolute;
			width: 100%;
			height: 100%;
			margin-bottom: 28rem;
		}

		.wrapper_ul>li {
   
			float: left;
			list-style: none;
			width: 20%;
			height: 5rem;
			text-align: center;
		}

		.wrapper_ul>li>img {
   
			width: 100%;
			height: 100%;
			background-size: 100% 100%;
			-webkit-filter: blur(5px);
			filter: blur(3px);
		}

		.button {
   
			cursor: url("https://assets.codepen.io/2243770/periwinkle40.png"), auto;
		}

		.button {
   
			position: relative;
			border: none;
			width: 100%;
			height: 74px;
			background-size: 100px 100px;
		}

		.topL {
   
			background: url("./img/one.jpg");
			background-size: 100px 100px;
			background-size: 100% 100%;
			-webkit-filter: blur(5px);
			/* Chrome, Safari, Opera */
			filter: blur(3px);
		}


		.topM {
   
			background: url("./img/two.jpg");
			background-size: 100px 100px;

			background-size: 100% 100%;
			-webkit-filter: blur(5px);
			/* Chrome, Safari, Opera */
			filter: blur(3px);
		}

		.topR {
   
			background: url("./img/there.jpg");
			background-size: 100px 100px;

			background-size: 100% 100%;
			-webkit-filter: blur(5px);
			/* Chrome, Safari, Opera */
			filter: blur(3px);
		}

		.topT {
   
			background: url("./img/t.jpg");
			background-size: 100px 100px;

			background-size: 100% 100%;
			-webkit-filter: blur(5px);
			/* Chrome, Safari, Opera */
			filter: blur(3px);
		}

		.topB {
   
			background: url("./img/b.jpg");
			background-size: 100px 100px;

			background-size: 100% 100%;
			-webkit-filter: blur(5px);
			/* Chrome, Safari, Opera */
			filter: blur(3px);
		}

		.midL {
   
			background

最低0.47元/天解锁文章