App下載

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

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

今天小編來(lái)教教大家怎么解決“怎么通過(guò)前端實(shí)做到現(xiàn)背景虛化內(nèi)容清晰？”這個(gè)問(wèn)題吧！不啰嗦，有時(shí)候前端會(huì)遇到背景虛化但要求內(nèi)容清晰的需求。

先看效果：


以下為具體實(shí)現(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;/*兩個(gè)center分別為水平和垂直方向的對(duì)齊方式*/
            background-size: 100%;/*背景水平鋪滿*/
            filter:blur(10px);/*虛化值，越大越模糊*/
        }
        .banner-contain{
            position: absolute;/*設(shè)置內(nèi)容層絕對(duì)定位*/
            width: 100%;
            text-align: center;
            z-index: 6;/*將內(nèi)容至于上層*/
            margin-top: 6%;
        }
    </style>
</body>
</html>

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

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

自適應(yīng)

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

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

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

總結(jié)

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


HTML5

0 人點(diǎn)贊