javascript - HTML/CSS/jQuery : background-image opacity

Question

假设我有一个 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
}

Answer 1

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