首頁 > web前端 > css教學 > 主體

css實作簡單背景模糊的方法(程式碼範例)

青灯夜游
發布: 2018-10-25 16:16:11
轉載
2592 人瀏覽過

這篇文章帶給大家的內容是介紹css實作簡單背景模糊的方法(程式碼範例)。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

使用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>
    <p class="cover">
        <h2>背景模糊,文字清晰显示</h2>
    </p>
</body>
登入後複製

以上是css實作簡單背景模糊的方法(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板