|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
如何用CSS降低背景圖像的清晰度和不透明度
作者:admin 時(shí)間:2022-8-18 11:32:57 瀏覽:如果在 HTML 中使用非常清晰的圖像作為元素的背景，它可能會(huì)影響元素的內(nèi)容。下面是一個(gè)例子。
背景圖清晰度過高會(huì)影響內(nèi)容
本文將討論如何在不影響其他內(nèi)容或元素的情況下降低背景圖像的清晰度和不透明度。在 CSS 中有很多方法可以做到這一點(diǎn)，下面是我今天要處理的方法。
遵循如何將圖像用作背景的步驟，該方法只是將圖像用作 HTML 中元素的背景的基本方法。
在上面的示例中，使用了以下樣式。
section{
background-image:url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}你可以看到背景的清晰度，我們可以通過對(duì) CSS 應(yīng)用一種新的樣式方法來降低背景清晰度。
降低背景清晰度
在上圖中，我們可以看到提供的兩個(gè)圖像之間的差異。此圖像不如具有背景圖像屬性的第一張圖像清晰。下面是它的代碼。
section{
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}在這里，使用了背景而不是背景圖像。如上所示，背景可以比背景圖像具有更多的價(jià)值。我給section元素一個(gè)背景屬性，其值為linear-gradient和url，10個(gè)示例了解CSS linear-gradient()背景顏色漸變。
總結(jié)
在處理其他背景圖像時(shí)使用背景屬性，以在必要時(shí)降低圖像的不透明度。這比單純使用圖片作為背景圖更有意義。
相關(guān)文章
標(biāo)簽: background
x
- 站長(zhǎng)推薦
