首頁 > 文章 > 每日程式設計 > css設定背景圖片模糊，內容不模糊

css設定背景圖片模糊，內容不模糊

卡哇伊原創: 2020-07-15 17:18:1710733瀏覽

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(&#39;1.jpg&#39;);            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>

原始效果：
css設定背景圖片模糊，內容不模糊

#解決方法：內容和圖片分別置於一個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(&#39;1.jpg&#39;);            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>

效果：
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(&#39;1.jpg&#39;);            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>

原始效果：
css設定背景圖片模糊，內容不模糊

#解決方法：內容和圖片分別置於一個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(&#39;1.jpg&#39;);            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>

效果：
css設定背景圖片模糊，內容不模糊

#感謝大家的閱讀，希望大家能受益良多。

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

推薦教學：《css教學》

以上是css設定背景圖片模糊，內容不模糊的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html .net background https

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：三分鐘了解css中z-index屬性下一篇：三分鐘了解css中z-index屬性

看更多