CSS遮罩層模糊效果是一種非常常見的Web頁面設計技巧,它可以讓我們在頁面中創建出一些美觀而又有層次感的效果。以下是一些關于如何使用CSS來實現模糊遮罩層的技巧和示例。
/* 基本樣式 */ .mask{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 1; } /* 高斯模糊 */ .mask{ filter: blur(10px); -webkit-filter: blur(10px); } /* 模糊加深 */ .mask{ background-color: rgba(0,0,0,0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* 網格模糊 */ .mask{ background-image: url('data:image/svg+xml;utf8,'); background-size: 20px; filter: blur(20px); -webkit-filter: blur(20px); }
總之,遮罩層模糊效果對于Web頁面設計是一個非常有用的技巧。通過靈活運用它,我們可以構建出更加復雜和吸引人的頁面效果,讓用戶獲得更好的使用體驗。
上一篇css 選擇文本顏色設置
下一篇css 重啟一行