如何為background-image設定透明度？-css教學-PHP中文網

首頁

web前端

css教學

如何為background-image設定透明度？

黄舟

Jul 20, 2017 am 09:52 AM

background-image 設定透明度

如題，現在是沒法改圖片本身的透明度，該圖片以 background-image 寫在 css 裡，不知道有沒有辦法給他設定透明度？

div{
    position: relative;        
}
div:after{
    content: &#39;&#39;;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(...);
    opacity: 0.5;
}

背景圖用png，有透明度。

元素設定透明度當背景，另一個元素遮蓋到上面客串下它兒子，假裝是這個元素的內容。

css的opacity屬性可以設定圖片的透明屬性，

#div{
    background-image: url(img.png);
    opacity:0.4;
    filter:alpha(opacity=40);/* 针对 IE8 以及更早的版本 */ }

無法改變圖片本身的透明度，那隻能改變整個DIV的透明度來達到類似的視覺效果：
1 .opacity屬性
2.如果相容性允許的話使用css3濾鏡-webkit-filter（有別於之前的IE濾鏡）。

看下這個網站的實作方法

Opacity in CSS background images

以上是如何為background-image設定透明度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1793

CakePHP 教程

1735

Laravel 教程

1587

NYT迷你填字遊戲答案

267

587

NYT連接提示和答案

120

836

Related knowledge

抖音如何設定定時發布作品時間？它如何設定影片時間長短？ Mar 27, 2024 pm 06:11 PM

在抖音上發布作品能夠更吸引關注和點贊，但有時候我們可能難以即時發布作品，這時就可以利用抖音的定時發布功能。抖音的定時發布功能可讓使用者在預定的時間自動發布作品，這樣可以更好地規劃發布計劃，增加作品的曝光率和影響力。一、抖音如何設定定時發布作品時間？若要設定定時發佈作品時間，先進入抖音個人首頁，在右上角找到「+」按鈕，點選進入發佈頁面。在發布頁面右下角有一個鐘錶的圖標，點擊進入定時發布介面。在介面中，你可以選擇要發布的作品類型，包括短影片、長影片和直播等。接下來，你需要設定作品的發佈時間。抖音提供了

請勿打擾模式在iPhone中不起作用：修復 Apr 24, 2024 pm 04:50 PM

即使在「請勿打擾」模式下接聽電話也可能是一種非常煩人的體驗。顧名思義，請勿打擾模式可關閉來自郵件、訊息等的所有來電通知和警報。您可以按照這些解決方案集進行修復。修復1–啟用對焦模式在手機上啟用對焦模式。步驟1–從頂部向下滑動以存取控制中心。步驟2–接下來，在手機上啟用「對焦模式」。專注模式可在手機上啟用「請勿打擾」模式。它不會讓您的手機上出現任何來電提醒。修復2–更改對焦模式設定如果對焦模式設定中存在一些問題，則應進行修復。步驟1–打開您的iPhone設定視窗。步驟2–接下來，開啟「對焦」模式設

qq中設定回車鍵發訊息的操作方法 Mar 25, 2024 pm 07:10 PM

1.先在手機桌面點選進入qq，點選左上角的頭像。 2.點選左下角的【設定】。 3.點選開啟【輔助功能】。 4.然後我們只要點選打開【回車鍵發送訊息】開關即可。

微博怎麼設定定時發布_微博設定定時發布方法教程 Mar 29, 2024 pm 03:51 PM

1.開啟微博客戶端，在編輯頁面中點選三個小點，再點選定時發。 2.點擊定時發之後，在發佈時間右側就有時間選項，設定好時間，編輯好文章，點擊右下角的黃色字定時發布即可。 3.微博手機端暫時不支援定時發布，只能在PC客戶端使用該功能哦！

抖音播放自動關機怎麼設定？播放過程自動退出什麼原因？ Apr 01, 2024 pm 12:06 PM

抖音作為當今最受歡迎的短影片平台之一，用戶在享受短影片帶來的樂趣時，也希望能夠更好地控制自己的時間。最近，有使用者反映抖音播放過程中會自動關閉，這讓他們感到非常困擾。一、抖音播放自動關閉怎麼設定？ 1.檢查抖音版本請確保您使用的抖音版本是最新的。抖音會定期更新，修復已知問題。如果您的抖音版本過舊，可能會出現自動關閉的問題。您可以在應用程式商店檢查並更新抖音。 2.檢查手機系統版本抖音播放自動關機也可能與手機系統版本有關。請確保您的手機系統版本是最新的。如果手機系統版本過舊，可能會導致抖音運作不穩定。您可以

大麥怎麼設定搶票倒數計時 Apr 01, 2024 pm 07:01 PM

大麥網購票時，為了確保能夠準確掌握購票時間，用戶可以設定一個懸浮時鐘來進行搶票，詳細的設定方法就在下文中，讓我們一起學習下吧。大麥綁定懸浮時鐘方法1.在手機中點擊開啟懸浮時鐘app進入介面後，在設定秒殺提查的位置點擊，如下圖所示位置：2.來到新增記錄的頁面後，把在大麥網中複製的買票連結頁面複製進去。 3.接下來在下方設定秒殺時間和通知時間，打開【儲存到日曆】後面的開關按鈕，並在下方點選【儲存】。 4.點選開啟【倒數計時】，如下圖所示：5.到提醒時間時在下方點選【開始畫中畫】的按鈕。 6.購票時間到時

抖音標籤在哪裡設定出來？它怎麼打標籤，才能精準推流？ Mar 27, 2024 am 11:01 AM

抖音作為全球最受歡迎的短影片平台之一，讓每個人都能成為創作者，分享生活中的點點滴滴。對於抖音使用者來說，標籤是一個非常重要的功能，它可以幫助使用者更好地分類和檢索內容，同時也能讓平台更精準地推送合適的內容給使用者。那麼，抖音標籤在哪裡設定呢？本文將詳細介紹如何在抖音上設定和使用標籤。一、抖音標籤在哪裡設定？在抖音上使用標籤可以幫助使用者更好地分類和標記自己的作品，讓其他使用者更容易找到並關注。設定標籤的方法如下：1.開啟抖音APP，並登入你的帳號。 2.點選畫面下方的「+」號，選擇「發表」按鈕。 3.