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

最新推荐文章于 2022-01-03 09:54:31 发布
最新推荐文章于 2022-01-03 09:54:31 发布
阅读量749 收藏
点赞数
分类专栏： javaScript css3 html5 文章标签： js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37916164/article/details/107911573
版权

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元/天 解锁文章
树洞菇凉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python自动截取固定数量视频帧组合成大图
weixin_37538090的博客
08-14 297
python自动处理视频，截取一定数量帧并将其组合成大图，并连接mysql，将处理信息保存到本地数据库
Java多张小图合成一张大图
02-24
java 程序将多张小图合成一张大图 适合css样式将多个小图合成大图
把多张小图合并成一张大图（像素图）
04-30
压缩包内分享了制作思路和使用方式。 就是加载一个图库，把你想要的目标图片，用图库里的N张图拼成一张你想要的目标图片的像素图
多张小图任意位置合成大图
05-27
CCTestSelDrawPicDoc* pDoc = GetDocument(); ASSERT_VALID(pDoc); CRect rect; GetClientRect(&rect); //得到客户区矩形 HBITMAP hbitmap; CBitmap bmptemp; CPoint point(200, 50); MedeyTwoPic(pDC, &m_dcFore, &m_dcBk, &m_bmpFore, &m_bmpBk, point, rect); hbitmap =(HBITMAP)GetCurrentObject(m_dcBk.GetSafeHdc(), OBJ_BITMAP); m_bmpBk.Detach(); m_bmpBk.Attach(hbitmap); CPoint pointtemp1(0,500); MedeyTwoPic(pDC, &m_dcFore, &m_dcBk, &m_bmpFore, &m_bmpBk, pointtemp1, rect); hbitmap =(HBITMAP)GetCurrentObject(m_dcBk.GetSafeHdc(), OBJ_BITMAP); //CBitmap bmptemp1; m_bmpBk.Detach(); m_bmpBk.Attach(hbitmap); CPoint pointtemp2(0,120); MedeyTwoPic(pDC, &m_dcFore, &m_dcBk, &m_bmpFore, &m_bmpBk, pointtemp2, rect); m_bmpBk.Detach(); Tofile(hbitmap, "c:\\temp.bmp");
利用Java程序把多张图片合成一张图片
11-10
利用Java程序把多张图片合成一张图片，利用Java程序把多张图片合成一张图片。
Java将图片合并为视频
05-25
2. **帧序列创建**：将每张图片转换为FFmpeg可识别的帧格式，通常为JPEG或PNG。 3. **视频参数设置**：定义视频的参数，如帧率（fps）、分辨率、编码器等。 4. **调用FFmpeg**：通过Java FFmpeg Bridge或Xuggler，...
css+js图片特效集合
10-12
另外，JavaScript可以用来处理图片的裁剪、缩放、旋转等操作，甚至可以实现动态的图片拼接和组合效果。 在“javascript经典效果示例”这个压缩包中，你可能会找到以下几种常见的JavaScript图片特效： 1. **图片预...
网站js图片特效 很好的哦
11-04
9. **图片拼接（Mosaic）**：通过JavaScript将多张图片拼接成一张大图，常见于背景图或者马赛克效果。 10. **拖放功能（Drag and Drop）**：允许用户通过拖放操作上传图片，增强用户体验。 11. **图片地图（Image ...
c#图片效果(带源码)
01-06
在描述中提到的"有点卡"可能是因为在处理大量像素或进行复杂计算时，CPU和内存资源的消耗较大。为了优化性能，可以考虑以下几点： 1. **利用多线程**：将图像处理任务分解到多个线程中，利用多核处理器并行计算。 2....
JavaScript下的10中图片特效
09-19
10. **图片拼接**：通过JavaScript动态组合多张图片，形成一张大图，如地图拼接、长图滚动等，尤其适用于展示大型图像信息。 这些JavaScript图片特效不仅丰富了网页的表现形式，也提高了用户的参与度。熟练掌握并...
OpenCV实现多图像拼接成一张大图
08-26
主要为大家详细介绍了OpenCV实现多图像拼接成一张大图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
将多张小图片合成大张atlas图片增强版
10-29
将多张小图片合成大张atlas图片增强版
python 将多张小图合并拼接成一张大图
DongHappyyy
08-29 2536
import os import cv2 import glob import copy import numpy as np prefix = 're00' imagename = 'restored.jpg' rootdir = './ourModelResult' savedir = './restored' for i in range(32): dirprefix = ''.join([prefix, f'{i:02d}-*']) readpath = os.path.joi.
PhotoShop简单案例（3）——利用ps实现多图合成（多张小图片拼成一张大图片）
Wendy的博客
01-03 1万+
目录一、项目介绍二、预处理2.1 图片裁剪2.2 多图裁剪2.3.1 新建动作2.3.2 图片裁剪2.3.3 批量裁剪三、基本流程四、效果演示 一、项目介绍 本文将介绍利用ps实现多图合成（多张小图片拼成一张大图片），制作完成的效果演示可以查看第四部分。 二、预处理 2.1 图片裁剪 首先要收集若干张图片，然后裁切成1:1的正方形，若干张张都要裁切成1:1。 单一图片裁剪方法： 文件——>打开——>选择图片——>选择左侧的裁剪工具——>在上侧选择1:1(方形)——>√ 2.2
怎样用N多小图片拼成一张大图?（数字图像处理）
热门推荐
PhoenixDefender的博客
10-17 3万+
前言最近在学校上了一门《数字图像处理》的课程，要求做一个实验，用很多小图像拼接成一张大图，类似与下面这种效果： 图是在网上找的，可以看到图中的小人其实是由很多的小图片组成的，课程要求就是作出这种效果的图片。下面放出我做的成果图片： 处理之后：程序还不是很完善，上面这种图颜色很单纯，没有特别多的细节变化，而一旦处理细节丰富的图像就成了下面的效果：原图： 处理之后：让我想起了梵高… … 程序
游戏素材处理：利用Python把多个序列帧合并为一个大序列图
Rabbit_Gray的博客
02-02 3386
目录 问题来源 代码解决 游戏素材的整理是一件挺麻烦的事情，但是只要用好了工具，便可以事半功倍。 问题来源 从网上找了一些游戏特效素材，其中包括很多批序列帧图集 一部分特效素材是所有子帧都拼在一张大图上的， 而另一部分是若干个单独的序列帧图片 这样使用起来极其不方便，需要把资源的形式统一。最终决定还是把零散的多个序列帧图片拼成一个大图比较方便管理。 代码解...
vue实现每隔几秒请求一次接口，实现数据更新
qq_37916164的博客
08-27 1万+
项目中我们经常需要实现轮询-每隔几秒请求一次接口实现数据更新 1：一般都会使用setInterval，但要注意单纯使用它会导致页面卡死 方法1： new Vue({ el: '#app', data: {}, created: function() { var that = this; // setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加 \ window.setInterval(() =
java 多张图片横向或者纵向拼接为一张大图
最新发布
06-02
你可以使用Java中的ImageIO和Graphics2D类来实现多张图片的横向或纵向拼接。下面是一个示例代码，可以拼接多张图片并保存为一张大图： ```java import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; public class ImageMerger { public static void main(String[] args) { try { //加载图片列表 BufferedImage[] images = new BufferedImage[3]; images[0] = ImageIO.read(new File("image1.jpg")); images[1] = ImageIO.read(new File("image2.jpg")); images[2] = ImageIO.read(new File("image3.jpg")); //计算新图片的宽度和高度 int maxWidth = 0; int totalHeight = 0; for (BufferedImage image : images) { maxWidth += image.getWidth(); totalHeight = Math.max(totalHeight, image.getHeight()); } //创建新图片 BufferedImage mergedImage = new BufferedImage(maxWidth, totalHeight, BufferedImage.TYPE_INT_RGB); //画图 Graphics2D g2d = mergedImage.createGraphics(); int x = 0; for (BufferedImage image : images) { g2d.drawImage(image, x, 0, null); x += image.getWidth(); } g2d.dispose(); //保存新图片 ImageIO.write(mergedImage, "jpg", new File("mergedImage.jpg")); } catch (IOException e) { e.printStackTrace(); } } } ``` 在这个示例中，我们首先加载了一个包含3张图片的图片列表，并计算出新图片的宽度和高度。然后，我们创建了一个新的BufferedImage对象，并使用Graphics2D类将所有图片画到新图片上。最后，我们将新图片保存到本地文件系统中。你可以根据需要修改示例代码中的图片路径和图片数量，然后运行代码进行测试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值