html毛玻璃背景代码,css毛玻璃背景的制作

你的名字 2022-10-09 00:56 157阅读 0赞

今天早上, 听到有人说拼多多上市, 然后各种黑, 说什么市场倒退了二十年, 然后搬出那英当年的"雾里看花",说这首歌就是在讽刺假货横行~

"雾里看花"代表了一种"朦胧美", 如果你喜欢朦胧美, 那你也可能也会喜欢毛玻璃

"毛玻璃"效果, 本质上是对背景图片的部分区域进行模糊运算, 比如我们在photoshop经常使用的高斯模糊, 这种模糊其实是在UI设计中非常常见, 比如Mac上的siri

![72c80500f942][]

Mac上siri的毛玻璃效果

![72c80500f942][]

对图片动态地进行模糊运算, 是需要消耗一些性能的, 原来这种模糊效果只被用于软件的设计中,随着浏览器技术的进步, 以及GPU运算能力的提升,这种模糊效果, 开始被用于网页的设计中

![72c80500f942][]

原理和photoshop修图的步骤类似, 用css中的blur滤镜实现高斯模糊, 对文字部分添加伪元素,对伪元素填充部分背景图片, 并添加模糊效果

![72c80500f942][]

![72c80500f942][]

css实现模糊效果, 与photoshop类似, 但略有不同, css通过postion:fixed来实现背景图片与伪元素对应部分图片的重合

css的玩法和photoshop进行平面设计的思维方式很类似, css通过逐步添加样式, 实现效果, Photoshop也是通过一步步操作的叠加,实现最终的效果

css与Photoshop的不同之处在于, css的样式顺序可以随意摆放, 而photoshop的操作步骤有一个严格的操作顺序

html源码

毛玻璃效果

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;

\}

打破次元壁?

与其说想打破次元壁, 进入二次元，不如说你已经厌倦了三次元人或物的丑的一面，只想获得美的一面。

\-- 知乎 https://www.zhihu.com/question/47849525

对于人类而言, 使用css和Photoshop的思维方式是类似的, 将自己想要展现的效果, 拆解为有限的步骤, 然后将步骤一步一步输入到计算机中

题外话, 人工智能与人类的区别? 以这个毛玻璃效果为例, 人工智能或许能在一瞬间完成这种效果, 而人类需要3分钟, 但人类在3分钟内,可能会涌现更好的想法, 并将想法添加到原本的步骤中, 人类与人工智能的区别想必已经很明显了~

[72c80500f942]: /images/20221005/aedf6903774a4403a0cfd70c758ca66a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关 154.CSS 实现毛玻璃特效

效果 (源码网盘地址在最后) ![a3e979e26b9cbba300f11c45625ff0a7.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

ゝ一纸荒年。/ 2023年01月19日 03:14/ 0 赞/ 130 阅读

相关 5分钟用CSS实现毛玻璃效果 CSS Glassmorphism

目录 1 视频 2 知识点 2.1 CSS calc() 函数 2.2 CSS var() 函数 2.3 backdrop-filter 2.4 CSS3 box

爱被打了一巴掌/ 2022年12月29日 14:13/ 0 赞/ 94 阅读

相关 css3实现毛玻璃效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRk

一时失言乱红尘/ 2022年10月16日 06:05/ 0 赞/ 182 阅读

相关 html毛玻璃背景代码,css毛玻璃背景的制作

今天早上, 听到有人说拼多多上市, 然后各种黑, 说什么市场倒退了二十年, 然后搬出那英当年的"雾里看花",说这首歌就是在讽刺假货横行~ "雾里看花"代表了一种"朦胧美",

你的名字/ 2022年10月09日 00:56/ 0 赞/ 158 阅读

相关 CSS背景

1.背景颜色： background-color: \bfa; 2.背景图片：background-image: url(""); 如果同时设置背景颜色和背景图片，则背景颜

浅浅的花香味﹌/ 2022年09月03日 12:28/ 0 赞/ 224 阅读

相关 Android 毛玻璃效果对话框

一个popwindow，在弹出的时候背景是原界面的截图加高斯模糊效果 ![Center][] 先给出popwindow的布局文件 <?xml version

朱雀/ 2022年08月18日 14:20/ 0 赞/ 170 阅读

相关 iOS8 的毛玻璃效果(UIVisualEffectView)

let bgv = UIVisualEffectView(effect: UIBlurEffect(style: .Light)) bgv.frame = CG

柔光的暖阳◎/ 2022年07月21日 01:09/ 0 赞/ 160 阅读

相关 Android 毛玻璃效果的实现

Android 毛玻璃效果，主要找到了3中实现方案， 1、如果系统的api在16以上，可以使用系统提供的方法直接处理图片 if (VERSION.SDK\_INT > 16

谁践踏了优雅/ 2022年04月22日 13:34/ 0 赞/ 349 阅读

相关 OpenCV：毛玻璃效果

毛玻璃效果的原理，即遍历每一个像素，随机选取这个像素周围的某一个像素，替换当前像素。实现代码如下： import cv2 import numpy as np

谁践踏了优雅/ 2022年01月20日 14:23/ 0 赞/ 220 阅读

相关 flutter 背景图片毛玻璃效果

1、引入图片滤镜文件 import 'dart:ui'; 2、在Stack组件中堆叠，产生图标毛玻璃效果若不使用图片毛玻璃

╰+攻爆jí腚メ/ 2021年07月24日 11:44/ 0 赞/ 587 阅读