【CSS】实现毛玻璃的两种方法

最新推荐文章于 2024-03-19 14:58:33 发布

Yomuki

最新推荐文章于 2024-03-19 14:58:33 发布

阅读量1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yomuki/article/details/113811918

版权

伪元素法

在需要显示毛玻璃的div后插入伪元素，伪元素采用绝对定位（即div需要relative）,背景图与毛玻璃下的图相同。

注意点：

为了解决该方法产生的中心模糊边缘清晰的问题，需要将伪元素进行margin负值处理，div需要添加overflow:hidden；

<!--
 * @Desc: 
 * @Author: Yomuki
 * @Date: 2021-02-14 22:18:10
 * @LastEditors: Yomuki
 * @LastEditTime: 2021-02-14 22:38:28
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .maoboli {
            display:flex;
            justify-content:center;
            align-items:center;
            height:500px;
            width:800px;
            margin: 20px auto;

最低0.47元/天解锁文章

Yomuki

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS】实现毛玻璃的两种方法

伪元素法在需要显示毛玻璃的div后插入伪元素，伪元素采用绝对定位（即div需要relative）,背景图与毛玻璃下的图相同。注意点：为了解决该方法产生的中心模糊边缘清晰的问题，需要将伪元素进行margin负值处理，div需要添加overflow:hidden；<!-- * @Desc: * @Author: Yomuki * @Date: 2021-02-14 22:18:10 * @LastEditors: Yomuki * @LastEditTime: 2021-02
复制链接

扫一扫