HTML/CSS/jQuery：背景圖像不透明

假設我有一個div，並且該div應該有一個background-image：url（foobar.png）。然而，foobar.png的不透明度應該設置爲40％，以便背景圖像是半透明的。我怎樣才能做到這一點？HTML/CSS/jQuery：背景圖像不透明

如果沒有JavaScript，這是不可能的，有沒有我可以參考的示例腳本？像這樣？

jQuery.fn.fadedBgImg = function(url, opacity) { 

    // Create block element that fills `this` element 

    // Set z-index of said element to lowest 

    // Set opacity of said element to 40% 

    // Insert said element into parent 
}

來源

2010-12-22 AgileMeansDoAsLittleAsPossible

有沒有簡單的創建圖像部分不透明爲你工作？爲什麼需要使用JavaScript？ – KatieK 2010-12-22 18:22:04

我覺得這是最簡單的方法：在你的圖形編輯器，在foobar.png透明度設置爲60％，並將其保存爲一個24位的PNG文件。如果您需要將此文檔提供給IE6並且不想使用png修補程序，那麼這不是一個解決方案。

否則，在瀏覽器支持方面，Web瀏覽器中的不透明性是一件煩人的事情，處理子元素變得透明是我記憶中的一個典型問題。

不幸的是我沒有任何腳本可以解決這個問題。

編輯：我看到你編輯了，我可以告訴你沒有不知道你在做什麼，因爲我最初的預期。如果我的建議看起來有點小，不要被冒犯，哈哈。

來源

2010-12-22 17:58:26

嘗試改變透明度與CSS：

opacity:0.4

來源

2010-12-22 17:59:21 XMen

使用CSS來設置不透明度：

.translucent { 
    opacity: 0.4; 
    filter: alpha(opacity = 40); /* For IE */ 
}

編輯：

是，opacity設置不透明度爲整個元素，而不僅僅是內容。要解決這個問題，你可以有內容覆蓋的背景和共同的父包他們兩個：

<div id="container"> 
    <div id="background" class="translucent"></div> 
    <div id="content"></div> 
</div>

並使用CSS這樣的：

#container { 
    position: relative; 
    width: 200px; 
    height: 200px; 
} 

#background, #content { 
    position: absolute; 
    top: 0; 
    left: 0; 
}

來源

2010-12-22 17:59:41 Jacob

這將改變div *和其內容的不透明度* - 而不僅僅是背景。 – AgileMeansDoAsLittleAsPossible 2010-12-22 18:24:23

雖然沒有設置背景的直接支持 - 圖像不透明度，你can specify multiple background-image values，這是與第一個最接近觀衆呈現。

因此，如果你有一些奇怪的原因無法在圖像編輯器，只需編輯圖像的不透明度和服務於修改後的圖像，你可以嘗試這樣的：

semitransparent = "images/white50.png"; //a 1x1 pixel image, white at 50% transparency. 
myElement.style.backgroundImage = "url('"+semitransparent+"'), url('"+backgroundImage+"')";

這個例子假設你通常是在一個白頁背景上渲染;如果您嘗試使用其他顏色部分滲色「半透明」來模擬半透明度，您可能希望更改半透明圖像的顏色。

來源

2015-08-23 02:20:14 WBT

In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element. 



img { opacity: 0.4; filter: alpha(opacity=40); //forIE* and earlier 

img:hover { opacity: 1.0; filter: alpha(opacity=100); //forIE* and earlier 

<img src="klematis.jpg" width="150" height="113" alt="klematis"> 

<img src="klematis2.jpg" width="150" height="113" alt="klematis">

來源

2016-03-10 05:47:55

嘗試此操作.. HTML結構的變化很小..而不是使用背景圖像使用普通圖像並以低透明度向後設置。

.my_div{width:300px;height:300px;position:relative;} 
 
.my_div div.back_image{display:block; position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:0.8;z-index:1;} 
 
.my_div div.back_image img {width: 100%; height:100%;} 
 
.my_div div.front_text{position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:1;z-index:99;padding:10px;color:#ffffff;box-sizing: border-box;}

<div class="my_div"> 
 
    <div class="back_image"><img src="https://newevolutiondesigns.com/images/freebies/black-wallpaper-10.jpg"></div> 
 
    <div class="front_text"> 
 
    <h2>Testing Title</h2> 
 
    <p>Lorem Ipsum content testing. 
 
    This is Prakash Rao </p> 
 
    </div> 
 
</div>

來源

2016-03-10 06:21:56

HTML/CSS/jQuery：背景圖像不透明

回答

相關問題