真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

web前端開發(fā)中如何實(shí)現(xiàn)背景虛化但內(nèi)容清晰且自適應(yīng)

小編給大家分享一下web前端開發(fā)中如何實(shí)現(xiàn)背景虛化但內(nèi)容清晰且自適應(yīng)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在永登等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作網(wǎng)站設(shè)計(jì)制作按需定制,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計(jì),成都營銷網(wǎng)站建設(shè),外貿(mào)網(wǎng)站建設(shè),永登網(wǎng)站建設(shè)費(fèi)用合理。

先看效果：

以下為具體實(shí)現(xiàn)：

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

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

web前端開發(fā)中如何實(shí)現(xiàn)背景虛化但內(nèi)容清晰且自適應(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容器，通過filter:blur()屬性設(shè)置虛化值，另一個(gè)為內(nèi)容層，絕對定位，設(shè)置z-index提高內(nèi)容層層次防止被遮擋，這樣內(nèi)容層不受虛化影響

以上是“web前端開發(fā)中如何實(shí)現(xiàn)背景虛化但內(nèi)容清晰且自適應(yīng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

http://weahome.cn/article/jigoes.html