filter: blur() 高斯模糊效果

news/2024/7/23 21:28:44 标签: CSS3, blur, filter, 高斯模糊
比较喜欢的效果实例:
	<div class="lbg">
      	    <img src="../../assets/01.jpg" class="test-img">
        </div>
	
	.lbg{
		/* 设置相对定位 */
		position: relative;
		/* 宽度120%,-10%让元素集中 */
		left: -10%;
		/* 为了实现椭圆效果 */
		width: 120%;
		height: 130px;
		/* 只设置左下角和右下角的圆角 */
		border-radius: 0 0 80% 80%;
		overflow: hidden;
	}
	/* 内层显示的图片 */
	.lbg img{
		width: 100%;
		height: 100%;
		/* 设置高斯模糊 */
		filter: blur(2px);
		overflow: hidden;
	}

CSS使用filter: blur(20px);实现高斯模糊效果,周边会出现扩展的白边;
    解决方案:
        对父元素设置overflow: hidden; 隐藏即可。


http://www.niftyadmin.cn/n/1162546.html

相关文章

Animate.css 动画效果框架

1. 从官网下载 https://raw.github.com/daneden/animate.css/master/animate.css 2. 通过npm安装 $ npm install animate.css 3. 使用在线cdn https://unpkg.com/animate.css3.5.2/animate.min.css 想要使用哪种动画&#xff0c;只需要把通用类animat…

vue set的使用

受 ES5 的限制&#xff0c;Vue.js 不能检测到以下响应式界面更新&#xff1a; 1. 数组中某一项的变动 例如&#xff1a; arr: [1,2,3,4] this.arr[0] 5 2. 数组长度的改变 例如&#xff1a; arr: […

Sortable.js 拖放排序插件

Sortable.js是一款轻量级的拖放排序列表的js插件 1. 安装$ npm install sortablejs --save 2. 使用定位到需要排序的对象&#xff0c;创建Sortable对象并添加响应配置设置可以通过方法&#xff1a;var sortable Sortable.create(el,{}) 或者 var sortable new Sortable(el…

react history 历史页面管理

history是为React Router提供核心功能的包。 它能轻松地在客户端为项目添加基于location的导航。 1. 安装npm install --save history 2. 类型import { createBrowserHistory, createHashHistory, createMemoryHistory } from history存在三类history&#xff0c;分别时browse…

Velocity.js 动画框架

网页的交互动效大概分为 css动画&#xff0c;js动画 Animate.css属于css动画框架&#xff0c;Velocity.js属于js动画框架 css动画的优点&#xff1a; 不用进行计算和更改dom 会显得非常流畅。 js动画的优点&#xff1a; 没有css那样的局限性&#xff0c;可以实现更多的…

缓存机制

缓存是指对数据的复用 比较常见的有&#xff1a; 1. 内存缓存 2. 磁盘缓存 电脑的三大核心部件&#xff1a; 1. 中央处理器 计算机的可编程性主要是指对中央处理器的编程。 2. 内部存储器 存储器的种类很多&#xff0c;按用途可以分为&am…

es6 find()和findIndex()查找函数

1. find()用来查找目标元素&#xff0c;找到就返回该元素&#xff0c;找不到返回undefined.查找回调函数&#xff0c;有三个参数语法&#xff1a;array.find((value, index, arr) > {value 匹配对象})2. findIndex()用来查找目标元素&#xff0c;找到就返回元素的位置&…

es6 filter()过滤函数

1. filter()返回符合条件的元素的数组[]筛选回调函数&#xff0c;有三个参数语法&#xff1a;array.filter((value, index, arr) > {value 匹配对象})特殊用法&#xff1a;1. 去掉空字符串、undefined、nullarray.filter((value, index, arr) > {value})2. 数组去重arra…