效果圖

DOM

<main><blockquote>"Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files."<footer>－<cite>XXXXXXXXXXXXXXXXXXXX</cite></footer></blockquote></main>

CSS

body,main::before{/*自行備圖一張*/background: url(img/bg-2.jpg) no-repeat;background-size: 700px 400px;background-attachment: fixed;background-position: top; } main{border-radius: 10px;color: white;width: 500px;height: 300px;margin: 0 auto;/*border: 1px solid #eee;*/display: flex;justify-content: center;align-items: center;position: relative;background: hsla(0,0%,100%,.3);overflow: hidden; } main::before{border-radius: 10px;content: '';position: absolute;left: 0;right: 0;top: 0;bottom: 0;/*關鍵代碼*/filter: blur(20px);z-index: -1;margin: -30px; }

?

轉載于:https://www.cnblogs.com/famLiu/p/7232855.html

總結

以上是生活随笔為你收集整理的20.毛玻璃效果blur的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。