首頁 > 文章 > web前端 > CSS3打造磨砂玻璃背景效果

CSS3打造磨砂玻璃背景效果

黄舟原創: 2017-01-22 17:31:592443瀏覽

簡介

這個效果是在看CSS Secrets這書上看到的,感覺很不錯;

實現原理也挺簡單的;

效果圖及實現

效果圖

CSS3打造磨砂玻璃背景效果效果圖及實現

效果圖

效果圖和實現

效果圖

效果圖和實現

效果圖🎜🎜🎜效果圖和實現🎜🎜效果圖🎜🎜🎜效果圖和實現🎜🎜效果圖🎜🎜🎜效果圖和實現🎜🎜效果圖🎜🎜🎜效果圖和實現🎜🎜效果圖🎜🎜🎜效果圖和實現🎜🎜效果圖🎜 🎜總結🎜🎜這種實現模式是考慮了性能來寫的,以及維護上的考慮 🎜- 比如使用了em,可以很輕鬆的放大縮小整體大小 🎜- 這裡使用了hsla,這是我第一次使用這個顏色值;以前只在ps調整這個,很不錯的顏色模式.和RGBA大同小異,但是HSLA更符合人類眼睛的觀看; 🎜- 還學到了一種新的背景縮寫方式🎜

<!DOCTYPE html>   

    <html>   

        <head>   

            <meta charset="UTF-8">   

            <title>Document</title>   

            <style>   

                        /**  

                         * 设置背景图全屏覆盖及固定  

                         * 设置内部元素偏移  

                         */  

                        body {   

                            /*此处背景图自行替换*/  

                            background: url(demo.jpg) no-repeat center center fixed;   

                            background-size: cover;   

                             min-height: 100vh;   

                            box-sizing: border-box;   

                            margin: 0;   

                            padding-top: calc(50vh - 6em);   

                            font: 150%/1.6 Baskerville, Palatino, serif;   

                        }   

      

                        /**  

                         * 整体居中功能；  

                         * 背景透明虚化  

                         * 溢出隐藏  

                         * 边缘圆角化  

                         * 文字增加淡阴影  

                         */  

                        .description{   

                            position: relative;   

                            margin: 0 auto;   

                            padding: 1em;   

                            max-width: 23em;   

                            background: hsla(0,0%,100%,.25) border-box;   

                            overflow: hidden;   

                            border-radius: .3em;   

                            box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,   

                                        0 .5em 1em rgba(0, 0, 0, 0.6);   

                            text-shadow: 0 1px 1px hsla(0,0%,100%,.3);   

                        }   

      

                        /*使用滤镜模糊边缘*/  

                        .description::before{   

                            content: &#39;&#39;;   

                            position: absolute;   

                            top: 0; rightright: 0; bottombottom: 0; left: 0;   

                            margin: -30px;   

                            z-index: -1;   

                            -webkit-filter: blur(20px);   

                            filter: blur(20px);   

                        }   

            </style>   

        </head>   

        <body>   

            <p>   

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod   

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,   

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo   

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse   

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non   

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   

            </p>   

        </body>   

    </html>

🎜以上就是CSS3打造磨砂玻璃背景效果的內容，更多相關內容請關注PHP中文網（www.php.cn）！ 🎜

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS3模擬IOS滑動開關效果下一篇：CSS3模擬IOS滑動開關效果

看更多

CSS3打造磨砂玻璃背景效果

相關文章