CSS 实现磨砂玻璃样式

要使用CSS实现磨砂玻璃样式，可以使用backdrop-filter属性和blur()函数。以下是一个简单的例子：

HTML:




<div class="engraved-glass"></div>

CSS:




.engraved-glass {
  width: 300px;
  height: 200px;
  background-image: url('background.jpg'); /* 替换为你的背景图片 */
  background-size: cover;
  background-position: center;
  filter: blur(10px); /* 调整模糊值 */
  backdrop-filter: blur(10px); /* 应用模糊效果 */
  border: 1px solid #000; /* 可选的边框样式 */
}

请注意，backdrop-filter属性可能不会在所有的浏览器中表现一致，特别是在旧浏览器中。可以通过JavaScript库或polyfills来提供兼容性支持。

CSS 实现磨砂玻璃样式

评论已关闭

推荐阅读