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：背景图像不透明

回答

相关问题