效果圖

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;/*關(guān)鍵代碼*/filter: blur(20px);z-index: -1;margin: -30px; }

?

轉(zhuǎn)載于:https://www.cnblogs.com/famLiu/p/7232855.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。