css设置背景模糊

来源：cnblogs　　作者：冰雪Queen　　时间：2018/10/23 9:05:12　　对本文有异议

使用filter属性来设置模糊值

效果：

css样式：

<style type="text/css">
        .cover {
            width: 600px;
            height: 300px;
            position: relative;
            text-align: center;
            line-height: 300px;
            color: #fff;
            margin: 20px auto;
        }
        
        .cover::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 300px;
            background: transparent url(Images/picture/5.jpg) center center no-repeat;
            filter: blur(8px);
            z-index: -1;
            background-size: cover;
        }
    </style>

HTML结构：

<body>
    <div class="cover">
        <h2>背景模糊，文字清晰显示</h2>
    </div>
</body>

友情链接：直通硅谷　点职佳　北美留学生论坛

CSS热门文章

CSS实现文字两端对齐

【WEB基础】HTML & CSS 基础入门（6）超链接

Javascript 对象 - 数学对象

对移动端兼容适配的分析

Element FORM结合Vue实现横向排列表单项

如何让一个input输入框居中

CSS Grid 布局完全指南(图解 Grid 详细教程)

css常见的各种布局上（两列布局）

vue+element导入导出excel

WEB前端动态背景集

CSS推荐文章

CSS布局概念与技术教程

15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder

现代 CSS 解决方案：文字颜色自动适配背景色！

脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质

深入解析css-笔记

CSS 还原拉斯维加斯球数字动画

震惊！CSS 也能实现碰撞检测？

前端开发如何更好的避免样式冲突？级联层(CSS@layer)

现代 CSS 解决方案：CSS 原生支持的三角函数

利用css var函数让你的组件样式输出规范样式API，可定制性更高；