css毛玻璃背景的制作
简介：
今天早上, 听到有人说拼多多上市, 然后各种黑, 说什么市场倒退了二十年, 然后搬出那英当年的"雾里看花",说这首歌就是在讽刺假货横行~"雾里看花"代表了一种"朦胧美", 如果你喜欢朦胧美, 那你也可能也会喜欢毛玻璃"毛玻璃"效果, 本质上是对背...
- 今天早上, 听到有人说拼多多上市, 然后各种黑, 说什么市场倒退了二十年, 然后搬出那英当年的"雾里看花",说这首歌就是在讽刺假货横行~
- "雾里看花"代表了一种"朦胧美", 如果你喜欢朦胧美, 那你也可能也会喜欢毛玻璃
- "毛玻璃"效果, 本质上是对背景图片的部分区域进行模糊运算, 比如我们在photoshop经常使用的高斯模糊, 这种模糊其实是在UI设计中非常常见, 比如Mac上的siri
- 对图片动态地进行模糊运算, 是需要消耗一些性能的, 原来这种模糊效果只被用于软件的设计中,随着浏览器技术的进步, 以及GPU运算能力的提升,这种模糊效果, 开始被用于网页的设计中
原理和photoshop修图的步骤类似, 用css中的
blur滤镜实现
高斯模糊, 对文字部分添加伪元素,对伪元素填充部分背景图片, 并添加模糊效果
- css实现模糊效果, 与photoshop类似, 但略有不同, css通过postion:fixed来实现背景图片与伪元素对应部分图片的重合
- css的玩法和photoshop进行平面设计的思维方式很类似, css通过逐步添加样式, 实现效果, Photoshop也是通过一步步操作的叠加,实现最终的效果
- css与Photoshop的不同之处在于, css的样式顺序可以随意摆放, 而photoshop的操作步骤有一个严格的操作顺序
html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>毛玻璃效果</title>
</head>
<style>
body {
margin: 0;
}
main, .wall::before{
background: url("http://fangyuanxiaozhan.com:10080/zhaoolee/images/raw/master/mk.jpg") 50% / cover no-repeat fixed;
}
main{
height: 100vh;
width: 100%;
}
.wall {
width: 380px;
position: absolute;
top: 20%;
left: 10%;
padding: 10px;
color: #A84631;
border-radius: 20px;
overflow: hidden;
z-index: 2;
}
.wall::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
filter: blur(10px);
margin: -20px;
z-index: -1;
}
</style>
<body>
<main>
<div class="wall">
<p style="font-size: 20px">
打破次元壁?
</p>
与其说想打破次元壁, 进入二次元，不如说你已经厌倦了三次元人或物的丑的一面，只想获得美的一面。
<p style="text-align: right">
-- 知乎 https://www.zhihu.com/question/47849525
</p>
</div>
</main>
</body>
</html>
- 对于人类而言, 使用css和Photoshop的思维方式是类似的, 将自己想要展现的效果, 拆解为有限的步骤, 然后将步骤一步一步输入到计算机中
- 题外话, 人工智能与人类的区别? 以这个毛玻璃效果为例, 人工智能或许能在一瞬间完成这种效果, 而人类需要3分钟, 但人类在3分钟内,可能会涌现更好的想法, 并将想法添加到原本的步骤中, 人类与人工智能的区别想必已经很明显了~
