论坛网站建设视频,好订单网服装加工接单,网页基本三要素,亚马逊图书网上商城背景
今天接到一个需求是#xff0c;使用高斯模糊的效果对一个页面进行模糊处理#xff0c;正好借这个机会来整理一下 css3 中高斯模糊的两个 API
API介绍
filter
说明#xff1a; 该 API 是一个过滤器#xff0c;不仅能实现高斯模糊#xff0c;还有很多比如颜色偏移、…背景
今天接到一个需求是使用高斯模糊的效果对一个页面进行模糊处理正好借这个机会来整理一下 css3 中高斯模糊的两个 API
API介绍
filter
说明 该 API 是一个过滤器不仅能实现高斯模糊还有很多比如颜色偏移、饱和度、灰度等等
语法
// 使用空格分隔多个滤镜
filter: none;
// 高斯模糊
filter: blur(4px);
// 线性亮度
filter: brightness();
// 对比度
filter: contrast();
// 阴影效果
filter: drop-shadow();
// 灰度
filter: grayscale();
// 色相旋转
filter: hue-rotate();
// 反转图像
filter: invert();
// 转换透明度
filter: opacity();
// 饱和度
filter: saturate();
// 褐色
filter: sepia();
// SVG滤镜
filter: url();其中高斯模糊 filter: blur();
backdrop-filter
说明 当你创造一个元素加上这个属性后会使得这个元素后面的区域添加效果如模糊或颜色偏移
对比 filter 属性必须要加载图像上或者背景图上而 backdrop-filter 只要是一个元素就可以。
语法
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);示例
filter例一
!DOCTYPE html
html langenheadstyle.wrapBox2 {width: 800px;height: 300px;overflow: hidden;position: relative;background-image: url(./win.jpeg);background-size: 100% 100%;background-repeat: no-repeat;filter: blur(10px);}.subBox {position: absolute;width: calc(100% - 100px);height: calc(100% - 100px);z-index: 2;}.text {position: relative;/* z-index: 10; */font-size: 40px;font-weight: bold;color: #f00;}/style/headbodydiv classwrapBox2div classsubBox/divdiv classtext全部模糊/div/div/body
/html 这里要注意的一点是添加模糊后实际的大小会超出我们设置的宽高因为周围的毛边效果你可以在外面包一层并设置 overflow: hidden;
filter例二
!DOCTYPE html
html langenheadstyle.wrapBox2 {width: 800px;height: 300px;/* overflow: hidden; */position: relative;}.subBox {width: 100%;height: 100%;position: absolute;width: calc(100% - 100px);height: calc(100% - 100px);z-index: 2;filter: blur(10px);}.text {position: relative;/* z-index: 10; */font-size: 40px;font-weight: bold;color: #f00;}/style/headbodydiv classwrapBox2img src./win.jpeg classsubBox /div classtext全部模糊/div/div/body
/html 这种方式的话文字和图片由于是平级的所以文字要么在图片下方要么在上方根据z-index来控制而不会对文字进行模糊。
backdrop-filter例一
!DOCTYPE html
html langenheadstyle.wrapBox2 {width: 800px;height: 300px;overflow: hidden;position: relative;background-image: url(./win.jpeg);background-size: 100% 100%;background-repeat: no-repeat;}.subBox {position: absolute;width: calc(100% - 100px);height: calc(100% - 100px);z-index: 2;backdrop-filter: blur(10px);/* top: 100px; */}.text {position: relative;/* z-index: 10; */font-size: 40px;font-weight: bold;color: #f00;}/style/headbodydiv classwrapBox2div classsubBox/divdiv classtext部分模糊/div/div/body
/html 可以看到backdrop-filter 属性不必设置在一个图片元素上面而是任何元素上面就行这种方式我觉得更加灵活
总结
如果只是模糊一张图片那么直接用 filter 就可以实现。如果想要用一个模糊蒙层盖住html页面/图片的某一部分那么使用 backdrop-filter。
当然使用 backdrop-filter 也可以满足第一种场景。
