在本文中，我們將使用bootstrap 4卡類來實現毛玻璃效果。

方法：

1.樣式設置主體：首先，為您的網頁設置背景。將以下代碼寫在

的CSSbody?{

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

background-repeat:?no-repeat;

background-size:?100%;

background-attachment:?fixed;

}

2.霜玻璃卡：在樣式標簽下，使用以下代碼，

的CSS.card?{

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

background:?inherit;

backdrop-filter:?blur(10px);

}

那我們這里有什么

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

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

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

保證金：保證金和填充根據您的需要。

注意： Mozilla的瀏覽器Firefox出現問題，并且在某些情況下，背景幕過濾器無法正常工作，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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。