聊天平臺原始碼，背景顯示使用仿磨砂玻璃樣式

聊天平臺原始碼，背景顯示使用仿磨砂玻璃樣式實現的相關程式碼

1.body內容

<div class="div-background">
    <div class="div-shadow">
        <div class="glass"></div>
        <div class="glass-txt">:o  原來我是一塊玻璃</div>
    </div>
</div>

2.css樣式

    body, html {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
 
    }
    *, *:before, *:after {
        box-sizing: border-box;
    }
    .div-background{
        height: 100%;
        width: 100%;
        background-image: url(");
        background-size: cover;
        background-position: center;
    }
    .glass {    /*插入圖片設定濾鏡並且定位到中間*/
        height: 100%;
        width: 100%;
        background-image: url(");
        background-size: cover;
        background-position: center;
        filter: blur(20px);         /*模糊濾鏡*/
        clip-path: inset(20%);      /*切割20%*/
    }
    .div-shadow {
        height: 100%;
        width: 100%;
        filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3));
        display: flex;
        justify-content: center;
    }
    .glass-txt{
        position: absolute;
        font-size: 40px;
        color: white;
        top: 50%;
        transform: translate(0, -50%);
    }

以上就是聊天平臺原始碼，背景顯示使用仿磨砂玻璃樣式實現的相關程式碼， 更多內容歡迎關注之後的文章