改變div背景圖片的不透明度

文字和背景圖片。我想減少背景圖像的不透明度。但是，當我將不透明度應用於DIV時，會影響DIV中的文本。如何在不更改DIV中文本的不透明度的情況下更改背景圖片的不透明度？

我有這個代碼，我從另一個問題在stackoverflow，我用它來減少另一個div的不透明度，但我不知道如何修改它來實現上述問題。

function convertHex(hex,opacity){ 
hex = hex.replace('#',''); 
r = parseInt(hex.substring(0,2), 16); 
g = parseInt(hex.substring(2,4), 16); 
b = parseInt(hex.substring(4,6), 16); 

result = 'rgba('+r+','+g+','+b+','+opacity/100+')'; 
return result; 
} 


$(".add_to_cart_button").click(function() { 

$(".cart-contents").css("background-color",convertHex('#f47d32',40)); 
});

來源

2016-09-20 Joseph

此主題在這裏覆蓋：http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity –

是圖片動態還是靜態？如果是靜態的，可以在Photoshop或類似軟件中減少不透明度，然後將其另存爲.PNG。請注意，這只是其中一個選項。 – harisdev

也相關：[設置背景圖像的不透明度而不影響子元素]（http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements） – showdev

第一步是添加z-index: -1;和position: relative;到你的背部DIV + CSS：

辦法改變不透明背景：

$("#backDiv").css("opacity", "0.4"); 
$("#backDiv").css({ opacity: 0.4 }); 
$("#backDiv").fadeTo("slow", 0.4); 
$("#backDiv").fadeTo(1000, 0.4); // fist parameter is animate time in ms

Test按鈕與可能性動畫後做一些動作：

$("#buttonTest").click(function() { 
    $("#backDiv").fadeTo("slow" , 0.4, function() { 
    // Animation complete. You can add some action. 
    }); 
});

我希望它可以幫助...

祝您好運！

來源

2016-09-20 20:49:08

我想下面是你正在尋找的東西：

#d1 { 
 
    background: url("http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG"); 
 
    height: 200px; 
 
    width: 500px; 
 
    position: relative; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgba(255, 255, 255, 0.7); 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
} 
 

 
#d2 { 
 
    color: red; 
 
    position: relative; 
 
}

<div id="d1"> 
 
    <div class="overlay"> </div> 
 
    <div id="d2"> 
 
    Test content 
 
    </div> 
 
</div>

來源

2016-09-20 20:42:14 Nimmi

我還沒有使用JavaScript，因爲它可以使用CSS來實現，如果需要，也可以使用JS – Nimmi

感謝代碼。我會看到哪一種最適合我的情況 – Joseph

改變div背景圖片的不透明度

回答

相關問題