溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css怎么使用磨砂背景

發(fā)布時(shí)間：2022-02-22 15:55:45 來源：億速云 閱讀：391 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“css怎么使用磨砂背景”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“css怎么使用磨砂背景”文章能幫助大家解決問題。

代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
                    /**
                     * 設(shè)置背景圖全屏覆蓋及固定
                     * 設(shè)置內(nèi)部元素偏移
                     */
                    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: '';
                        position: absolute;
                        top: 0; right: 0; bottom: 0; left: 0;
                        margin: -30px;
                        z-index: -1;
                        -webkit-filter: blur(20px);
                        filter: blur(20px);
                    }
        </style>
    </head>
    <body>
        <p class="description">
        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>

總結(jié)

這種實(shí)現(xiàn)模式是考慮了性能來寫的,以及維護(hù)上的考慮

  • 比如使用了 em,可以很輕松的放大縮小整體大小

  • 這里使用了 hsla,這是我第一次使用這個(gè)顏色值;以前只在 ps 調(diào)整這個(gè),很不錯(cuò)的顏色模式.和 RGBA 大同小異,但是 HSLA 更符合人類眼睛的觀看;

  • 還學(xué)到了一種新的背景縮寫方式

/*分開寫*/
background-color:#ff0;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
background-size:cover;

/*簡寫*/
background: #ff0 url(background.gif) no-repeat / fixed cover;
/*設(shè)置background-size必須用單斜杠隔開*/

關(guān)于“css怎么使用磨砂背景”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手