当前栏目
CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter
💭💭
✨: CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter
💟:东非不开森的主页
💜: 因为很多东西来不及去做去看可是时间很快总是赶不上,所以要去成长呀💜💜
🌸: 如有错误或不足之处,希望可以指正,非常感谢😉
应用场景:在音乐类的项目,会有让图片当背景模糊的效果
如下图:
一、使用filter: blur()
⭐⭐⭐
-
filter: blur()
,把图片变模糊的同时,四周也会模糊,没有边界,就不好看哈哈 -
给它一个父级元素,父元素控制宽高,超出部分隐藏
css
.bg {
position: fixed;
width: 450px;
height: 253px;
overflow: hidden;
}
.bg-image {
width: 100%;
filter: blur(5px);
}
.bg-image::after {
content: "";
display: block;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
html
:
<div class="bg">
<img src="./images/动漫.jpg" alt="" class="bg-image" />
</div>
预览效果:
虽然四周是清晰了,但是还是会看见白色的边边。
二、backdrop-filter: blur()
⭐⭐⭐⭐⭐
原本图片,想要毛玻璃效果,给它加滤镜(注意,并不是图片模糊化,是给它加滤镜)
- 背景固定,背景的宽高要和图片一致
- 在添加另外一个元素(即为滤镜),给它设透明度和模糊值
- 给背景和滤镜设置z-index:-1, 使用负值降低优先级,防止添加在模糊图片上的文字图片模糊
代码:
css
:
.bg-image,
.inner {
position: fixed;
top: 0;
left: 0;
width: 450px;
height: 253px;
z-index: -1;
}
.inner {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
html
:
<div class="bg-image">
<img src="./images/动漫.jpg" alt="" class="img" width="100%" />
<div class="inner"></div>
</div>
预览效果:
这样就是我们要的效果了,nice~
补充:filter、backdrop✨✨
✨✨
推荐去mdn官网看哦: MDN
- filter
mdn文档这样介绍:
CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
-
blur
filter: blur() 单位是px
越大越模糊 -
opacity
filter: opacity()
透明度,设置元素的透明度在0~1之间
0:完全透明
1:无效 -
grayscale
filter: grayscale()
使图片变灰blablabla~~
和我我下面总结的属性都是一致的(太累了,不想打了,用到啥就去搜吧嘿嘿)
2. backdrop-filter
mdn文档这样介绍:
backdrop-filter
CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。
也就是说给图片加了一层滤镜(我是这样理解的)
常见属性:
- backdrop-filter: blur();
高斯模糊滤镜
- backdrop-filter: brightness();
图片明亮度滤镜
- backdrop-filter: contrast();
对比度滤镜
- backdrop-filter: drop-shadow();
阴影滤镜
- backdrop-filter: grayscale();
灰度滤镜
- backdrop-filter: hue-rotate();
色相滤镜
- backdrop-filter: invert();
反转滤镜
- backdrop-filter: opacity();
透明度滤镜
- backdrop-filter: sepia();
深褐色滤镜
- backdrop-filter: saturate();
饱和度滤镜
示例:
括号里面为他们所用的值和单位
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%);
(~ ̄▽ ̄)~
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件