站長(zhǎng)資訊網(wǎng)在上一篇《HTML/css實(shí)現(xiàn)好玩的文本液體填充效果》中給大家介紹了怎么使用HTML/css實(shí)現(xiàn)好玩的文本液體填充效果，感興趣的朋友可以去學(xué)習(xí)了解一下~
本文將給大家介紹如何使用HTML和CSS制作玻璃/模糊效果疊加。
具體是什么樣的效果呢？
下面我們直接上完整的代碼：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> body { margin: 0; padding: 0; } section { position: relative; background: url(004.jpg); background-attachment: fixed; height: 100vh; } section .layout { position: relative; top: 35%; left: 30%; max-width: 600px; padding: 50px; box-shadow: 0 10px 20px rgba(0, 0, 0, .5); color: rgb(255, 254, 254); } section .layout::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url(004.jpg); background-attachment: fixed; filter: blur(8px); } section .layout h2 { position: relative; } section .layout p { position: relative; } section .layout button { position: relative; } </style> </head> <body> <section> <div class="layout"> <h2>PHP中文網(wǎng)</h2> <p> php中文網(wǎng)提供大量免費(fèi)、原創(chuàng)、高清的php視頻教程,并定期舉行公益php培訓(xùn)!可邊學(xué)習(xí)邊在線修改示例代碼,查看執(zhí)行效果!php從入門到精通,一站式php自學(xué)平臺(tái)! </p> <button class="btn btn-outline-danger"> 按鈕 </button> </div> </section> </body> </html>
效果如下：
這里主要需要大家掌握f(shuō)ilter屬性和:before 選擇器：
filter屬性：
filter屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
注：舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支持的非標(biāo)準(zhǔn) "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用 opacity 屬性。
:before 選擇器：
:before 選擇器在被選元素的內(nèi)容前面插入內(nèi)容，要使用 content 屬性來(lái)指定要插入的內(nèi)容。
注：對(duì)于 IE8 及更早版本中的 :before，必須聲明 <!DOCTYPE>。
PHP中文網(wǎng)平臺(tái)有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》《HTML視頻教程》！
