您的位置:跳跳熊 > css设置背景模糊,内容不模糊怎么办 css设置背景模糊,内容不模糊

css设置背景模糊,内容不模糊怎么办 css设置背景模糊,内容不模糊

2023-05-17 00:43

css设置背景模糊,内容不模糊怎么办 css设置背景模糊,内容不模糊

css设置背景模糊,内容不模糊怎么办

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>
登录后复制
登录后复制

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

解决方法:内容和图片分别置于一个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设置背景图片模糊,内容不模糊的详细内容,更多请关注本站其它相关文章!

阅读全文
以上是跳跳熊为你收集整理的css设置背景模糊,内容不模糊怎么办 css设置背景模糊,内容不模糊全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 跳跳熊 tiaotiaoxiong.com 版权所有 联系我们
桂ICP备19012293号-25 Powered by CMS