App下載

怎么通過前端實做到現(xiàn)背景虛化內(nèi)容清晰?解決方法案例詳情!

怪味少女 2021-08-07 15:17:13 瀏覽數(shù) (2704)
反饋

今天小編來教教大家怎么解決“怎么通過前端實做到現(xiàn)背景虛化內(nèi)容清晰?”這個問題吧!不啰嗦,有時候前端會遇到背景虛化但要求內(nèi)容清晰的需求。

先看效果:


以下為具體實現(xiàn):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景虛化</title>
</head>
<body>
    <div class="main">
<!--        以下為背景虛化,其他內(nèi)容清晰-->
<!--        內(nèi)容層-->
        <div class="banner">
            <div class="banner-contain">
                <h1>我是內(nèi)容</h1>
            </div>
<!--            背景層-->
            <div class="banner-bg"></div>
        </div>
    </div>
    <style>
        .main{
            width: 100%;
        }
        .banner{
            width: 100%;
            position: relative;
        }
        .banner-bg{
            width: 100%;/*寬度鋪滿屏幕*/
            padding-top: 52.734%;/*圖片高度除以寬度,得到此值*/
            background: url("test.jpg")center center no-repeat;/*兩個center分別為水平和垂直方向的對齊方式*/
            background-size: 100%;/*背景水平鋪滿*/
            filter:blur(10px);/*虛化值,越大越模糊*/
        }
        .banner-contain{
            position: absolute;/*設(shè)置內(nèi)容層絕對定位*/
            width: 100%;
            text-align: center;
            z-index: 6;/*將內(nèi)容至于上層*/
            margin-top: 6%;
        }
    </style>
</body>
</html>

1.自適應(yīng)的實現(xiàn):

設(shè)置div標簽padding-top為百分比,padding和margin百分比值是依據(jù)寬度計算的而非屏幕高度,所以可以依此設(shè)置一個自適應(yīng)的區(qū)域,比如圖片信息如下

自適應(yīng)

那么高寬比例為:540/1024 大概為52.734%,也就是高度為寬度的52.734%,這里寬度設(shè)置為100%,那么寬度的padding-top即為52.734%*100%

2.背景虛化內(nèi)容清晰的實現(xiàn):

設(shè)置兩個層,一個是背景虛化層,自適應(yīng)撐起整個外層div容器,通過filter:blur()屬性設(shè)置虛化值,另一個為內(nèi)容層,絕對定位,設(shè)置z-index提高內(nèi)容層層次防止被遮擋,這樣內(nèi)容層不受虛化影響

總結(jié)

那么以上所述就是小編給大家介紹的有關(guān)于:“怎么通過前端實做到現(xiàn)背景虛化內(nèi)容清晰?”這個問題的相關(guān)內(nèi)容分享,更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進行學習和了解! 


0 人點贊