css设置背景图片模糊，内容不模糊-css知识-PHP中文网

css设置背景图片模糊，内容不模糊

卡哇伊

发布： 2020-07-15 17:18:17

原创

11530人浏览过

css设置背景图片模糊，内容不模糊需求：一个p设置了background: url，现在需要使图片背景模糊，p内的文字清晰显示。

原始代码：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url('1.jpg');            background-repeat: no-repeat;            background-position: center;            background-size: cover;            height:600px;            text-align: center;            line-height: 600px;        }
    </style></head><body><p class="bg">
    <p class="content">我是内容</p></p></body></html>

登录后复制

原始效果：
这里写图片描述

I-Shop购物系统

部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/

查看详情

解决方法：内容和图片分别置于一个p，通过css设置背景p模糊度，设置内容p绝对位置。

html代码：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url('1.jpg');            height:600px;            text-align: center;            line-height: 600px;        }
        .bg-blur {            float: left;            width: 100%;            background-repeat: no-repeat;            background-position: center;            background-size: cover;            -webkit-filter: blur(15px);            -moz-filter: blur(15px);            -o-filter: blur(15px);            -ms-filter: blur(15px);            filter: blur(15px);        }
        .content-front {          position:absolute;          left: 10px;          right: 10px;          height:600px;          line-height: 600px;          text-align: center;        }

    </style></head><body>
    <p>
        <p class="bg bg-blur"></p>
        <p class="content content-front">我是内容</p>
    </p></p></body></html>

登录后复制

效果：
这里写图片描述

需求：一个p设置了background: url，现在需要使图片背景模糊，p内的文字清晰显示。

原始代码：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url('1.jpg');            background-repeat: no-repeat;            background-position: center;            background-size: cover;            height:600px;            text-align: center;            line-height: 600px;        }
    </style></head><body><p class="bg">
    <p class="content">我是内容</p></p></body></html>

登录后复制

原始效果：
这里写图片描述

解决方法：内容和图片分别置于一个p，通过css设置背景p模糊度，设置内容p绝对位置。

html代码：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <style type="text/css">
        .content {            color: #ffffff;            font-size: 40px;        }
        .bg {            background: url('1.jpg');            height:600px;            text-align: center;            line-height: 600px;        }
        .bg-blur {            float: left;            width: 100%;            background-repeat: no-repeat;            background-position: center;            background-size: cover;            -webkit-filter: blur(15px);            -moz-filter: blur(15px);            -o-filter: blur(15px);            -ms-filter: blur(15px);            filter: blur(15px);        }
        .content-front {          position:absolute;          left: 10px;          right: 10px;          height:600px;          line-height: 600px;          text-align: center;        }

    </style></head><body>
    <p>
        <p class="bg bg-blur"></p>
        <p class="content content-front">我是内容</p>
    </p></p></body></html>

登录后复制

效果：
这里写图片描述

感谢大家的阅读，希望大家受益良多。

本文转自：https://blog.csdn.net/oHeHeHou/article/details/51975539

推荐教程：《css教程》

以上就是css设置背景图片模糊，内容不模糊的详细内容，更多请关注php中文网其它相关文章！