HTML/CSS/jQuery：背景图像不透明度答案

【问题标题】：HTML/CSS/jQuery: background-image opacityHTML/CSS/jQuery：背景图像不透明度
【发布时间】：2011-05-29 13:31:33
【问题描述】：

假设我有一个 div，该 div 应该有一个 background-image:url(foobar.png)。但是，同样，foobar.png 的不透明度应该设置为 40%，以便背景图像是半透明的。我该怎么做？

如果没有 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
}

【问题讨论】：

简单地创建部分不透明的图像是否适合您？为什么需要使用 JavaScript？

标签： javascript html css opacity

【解决方案1】：

我发现这是最简单的方法：在您的图形编辑器中，将 foobar.png 的透明度设置为 60% 并将其保存为 24 位 png 文件。如果您需要将此文档提供给 IE6 并且不想使用 png 修复，这不是解决方案。

否则，就跨浏览器支持而言，Web 浏览器中的不透明度是一件令人讨厌的事情，而处理子元素变得透明是我记得的一个典型问题。

不幸的是，我没有任何脚本可以方便地解决这个问题。

edit：我看到你编辑了，我可以告诉你，你并不像我最初预期的那样不知道你在做什么。如果我的建议看起来有点初级，请不要生气，哈哈。

【讨论】：

【解决方案2】：

尝试使用 css 更改不透明度：

opacity:0.4

【讨论】：

【解决方案3】：

使用 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;
}

【讨论】：

这将改变 div 及其内容的不透明度——而不是只是背景。

【解决方案4】：

虽然没有直接支持设置背景图像不透明度，但您 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+"')";

此示例假设您通常在白色页面背景上进行渲染；如果您尝试使用其他颜色部分“穿透”来模拟半透明，您可能希望更改半透明图像的颜色。

【讨论】：

【解决方案5】：

 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">

【讨论】：

【解决方案6】：

试试这个 .. 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>

【讨论】：