20.毛玻璃效果blur

效果图

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