改变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背景图片的不透明度

回答

相关问题