CSS秘密花园:磨砂玻璃效果

最新推荐文章于 2025-01-05 08:06:42 发布

转载最新推荐文章于 2025-01-05 08:06:42 发布 · 1.2k 阅读

文章标签：

#css3

CSS3 专栏收录该内容

19 篇文章

订阅专栏

效果如下：转载自 https://www.w3cplus.com/css3/css-secrets/frosted-glass-effect.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    body{position:relative;}
    main{ width:400px; height:300px; margin:100px auto; }
    blockquote{ width:100%; height:100%;}
    body, main::before { background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1518171476331&di=8066fd708f4dc8f34fb8a8c6a3ccef74&imgtype=0&src=http%3A%2F%2Fpic26.huitu.com%2Fres%2F20141230%2F581721_20141230232100507134_1.jpg") 0 / cover fixed; } 
    main { position: relative; background: hsla(0,0%,100%,.3); overflow:hidden;} 
    main::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; filter: blur(20px); z-index:-1; margin:-30px;}
    
  </style>
</head>
<body>
<main> 
  <blockquote> “The only way to get rid of a temptation[…]” 
    <footer>— 
      <cite> Oscar Wilde, The Picture of Dorian Gray </cite> 
    </footer>
  </blockquote>
</main>

</body>
</html>