在本文中，我們將使用bootstrap 4卡類(lèi)來(lái)實(shí)現(xiàn)毛玻璃效果。

方法：

1.樣式設(shè)置主體：首先，為您的網(wǎng)頁(yè)設(shè)置背景。將以下代碼寫(xiě)在

的CSSbody?{

background-image:?url('background.jpg');

background-repeat:?no-repeat;

background-size:?100%;

background-attachment:?fixed;

}

2.霜玻璃卡：在樣式標(biāo)簽下，使用以下代碼，

的CSS.card?{

box-shadow:?0?0?5px?0?;

background:?inherit;

backdrop-filter:?blur(10px);

}

那我們這里有什么

box-shadow：此屬性用于為元素的框架提供類(lèi)似陰影的效果。

背景：使用它可以使元素透明并具有與網(wǎng)頁(yè)相同的背景(在主體類(lèi)中，必須具有“背景固定：固定”)

背景過(guò)濾器：使用此選項(xiàng)可將效果應(yīng)用于元素后面的區(qū)域。(也請(qǐng)閱讀)基本上，這是在此處減少許多CSS樣式的屬性。

保證金：保證金和填充根據(jù)您的需要。

注意： Mozilla的瀏覽器Firefox出現(xiàn)問(wèn)題，并且在某些情況下，背景幕過(guò)濾器無(wú)法正常工作，Chrome和Edge可以正常工作。

3.最終代碼HTMLhtml>

body?{

background-image:?url("./banner02.jpg");

background-repeat:?no-repeat;

background-size:?100%;

background-attachment:?fixed;

}

h1?{

color:?white;

height:?250px;

display:?flex;

justify-content:?center;

align-items:?center;

}

.card?{

top:?50%;

box-shadow:?0?0?5px?0;

background:?inherit;

backdrop-filter:?blur(10px);

margin:?100px;

text-align:?center;

}

style="justify-content:?center;">

IT72

總結(jié)

以上是生活随笔為你收集整理的html 磨砂 原理,使用HTML和CSS设计磨砂玻璃效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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