Vue中图片实现毛玻璃效果

举例（Ant Design 的 Image 组件的官方示例图片）：

实现：

 <div class="background"><div class="background-content"><div class="background-content-image"></div><imgsrc="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"/></div></div>

<style>.background {width: 260px;height: 200px;overflow: hidden; //避免虚化的阴影和边框会溢出。}.background-content {width: 260px;height: 100%;position: relative;/* 让图片居中显示 */display: flex;justify-content: center;align-items: center;}.background-content-image {position: absolute;/* 重点，不能让背景大过于展示的图片 */z-index: -1;width: 260px;height: 100%;filter: blur(8px); //重点：使用的是 filter 来实现的background-image: url(https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp); //两个一样的background-size: 100%;background-position: center;background-repeat: no-repeat;}img {max-height: 100%;}
</style>

Vue中图片实现毛玻璃效果相关推荐

如何在 iPhone 中实现图片的毛玻璃效果
今天我们一起来看一下,如何通过 ToolBar 模拟出图片的毛玻璃效果.首先我们新建一个工程,工程模板切换到 iOS ,选择 Single View Application ,如下图所示: 点击 Ne ...
前端进阶必备技能：Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
vue中图片上传及回显
在vue中图片上传到服务器下指定路径,并实现根据图片路径调取后台接口返回图片流在vue页面展示图片一.图片上传 1.前台上传 <template slot-scope="scope& ...
网页中实现图片的毛玻璃效果
方式1,使用Css控制,但是有不兼容的时候 /*使用Css,实现毛玻璃效果方案一注:1.IE中不支持blur()方法2.IE9及以下浏览器支持滤镜 progid:DXImageTransform. ...
OC中设置图片的毛玻璃效果
目录毛玻璃效果介绍实现过程代码实现图片效果毛玻璃效果介绍设置毛玻璃效果我们可以理解成在在图片上加了一层模糊蒙版,如果不理解蒙版,可以理解成我们透过毛玻璃查来看图片我们来看以下两张图片,图 ...
css背景图毛玻璃,css实现背景图片的毛玻璃效果
问题一css 一.简述问题html 最近在作登陆页面的时候,遇到了一个问题:将登陆页面的背景图片,设置为毛玻璃效果.在网上找到了关于这方面的资料.web 二.问题解决svg .blur { filte ...
css实现背景图片的毛玻璃效果
问题一 1.简述问题最近在做登录页面的时候,遇到了一个问题:将登录页面的背景图片,设置为毛玻璃效果.在网上找到了关于这方面的资料. 2.问题解决 <!DOCTYPE html> < ...
图片处理-----毛玻璃效果
一.UIVisualEffectView实现 UIBlurEffect对象用于将blur(毛玻璃)效果应用于UIVisualEffectView视图下面的内容. UIVibrancyEffect主要用 ...
图片的毛玻璃效果学习
毛玻璃效果与马赛克效果类似,而毛玻璃是随机采用像素替换.这里我们定义了一个8的范围,然后遍历,取随机数.为了防止m正好是整个图片的最后一个点,所以height,width都减去8以免超出范围. imp ...

Vue中图片实现毛玻璃效果

Vue中图片实现毛玻璃效果相关推荐

最新文章

热门文章