使用 GetElementById 时更改图像不透明度

Question

我的 Uni 模块的一部分要求我制作一个使用随机元素混合故事的网络故事。我在 JS 中使用 GetElementById 将数组中的一张随机图像嵌入到 div 中，效果非常好。该图像成为 div 的背景，然后我在图像顶部添加了文字 - 同样，一切正常。

然而问题是我希望图像稍微透明以便文本更容易阅读，但是无论我尝试什么解决方案，我都无法正常工作。

我已经尝试在 CSS 和 JS 中使 div 透明，但是然后整个 div 包括文本都受到影响，这违背了这一点。然后当我在 CSS 中尝试 RGBA 样式时，图像不受影响。

所以我需要的是通过JS加载到div中的图像稍微透明，同时也在HTML文档中的div中的文本保持原状。

这是我用来随机 select 图片的 JS：

function randomGun() {
  var imgCount = 3;
  var dir = 'img/';
  var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
  var images = new Array
  images[1] = "gun1.jpg",
    images[2] = "gun2.jpg",
    images[3] = "gun3.jpg",
    document.getElementById("left").style.backgroundImage = "url(" + dir + images[randomCount] + ")";
}

<div id="container">
  <div id="left">
    <a id="message">Drive a bit closer to see if anybody is there.</a> 
  </div>

  <script>
    window.onload = randomGun()
  </script>

</div>

Answer 1

更新

添加了您的 JS 并稍微修复了它。注意对随机表达式的调整。

也许这会对你有所帮助。

使用将包含 2 个其他元素的元素，给容器 position:relative 和 z-index:-2
那么里面的2个元素应该有position:absolute.
接下来给出最上面的元素z-index:-1、background:url(http://image-host.com/path/to/img.jpg)和opacity:.5
然后第二个元素应该有文本和任何你想要可见的东西。给这个元素z-index:1.

不透明度没有按照您预期的方式工作的原因是 opacity 也适用于元素中的所有内容。在代码片段中，我们分别将一个包含内容的元素和一个包含背景图片的元素分层。

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

片段

function randomBG() {
    var imgCount = 3;
    var path = 'http://imgh.us/';
    var randomCount = Math.round(Math.random() * (imgCount));
    var images = ['solar_system.jpg', 'kowloon.jpg', 'transparent-map.png'];
  
  document.getElementById("fader").style.backgroundImage = "url(" + path + images[randomCount] + ")";
}

window.onload = randomBG;

html,
body {
  height: 100%;
  width: 100%;
  font: 400 16px/1.5 Verdana;
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
}
#base {
  position: relative;
  z-index: -2;
  width: 100vw;
  height: 100vh;
}
#content {
  position: absolute;
  z-index: 1;
  padding: 20px;
  margin: 0 auto;
  width: 75%;
  height: auto;
  top: 0;
  left: 0;
  background: none;
}
#fader {
  position: absolute;
  z-index: -1;
  padding: 20px;
  margin: 0 auto;
  min-width: 75%;
  min-height: 75%;
  /*background: url(http://imgh.us/Lenna.png);*/
  opacity: .5;
}

<main id='base'>
  <section id='fader'></section>
  <article id='content'>
    <h1>This is the Text</h1>
  </article>
</main>

Answer 2

使用带有 semi-transparent 白色背景的嵌套 div。

<div id="container">
 <div id="left">
   <div id="nested" style="width:100%;height:100%; background-color: rgba(255,255,255,0.5)">
    <a id="message">Drive a bit closer to see if anybody is there.</a>  
   </div>
 </div>

 <script>window.onload = randomGun()</script> 

</div>

此外，我会在样式表中或至少在 <style></style>.

中设置与样式相关的所有内容

使用 GetElementById 时更改图像不透明度

Change image opacity when using GetElementById

javascript

image

getelementbyid

opacity