溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么用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 h3 { position: relative; } section .layout p { position: relative; } section .layout button { position: relative; } </style> </head> <body> <section> <div class="layout"> <h3>億速云</h3> <p> 億速云提供大量免費、原創、高清的php視頻教程,并定期舉行公益php培訓!可邊學習邊在線修改示例代碼,查看執行效果!php從入門到精通,一站式php自學平臺! </p> <button class="btn btn-outline-danger"> 按鈕 </button> </div> </section> </body> </html>
效果如下：
這里主要需要大家掌握filter屬性和:before 選擇器：
filter屬性：
filter屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
注：舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支持的非標準 "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用 opacity 屬性。
:before 選擇器：
:before 選擇器在被選元素的內容前面插入內容，要使用 content 屬性來指定要插入的內容。
注：對于 IE8 及更早版本中的 :before，必須聲明 <!DOCTYPE>。
看完了這篇文章，相信你對“怎么用HTML和CSS制作玻璃/模糊效果”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
