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

Question

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

4

我的Uni模块的一部分要求我制作一个Webstory，使用随机元素来混合故事。我正在使用JS中的GetElementById将数组中的一个随机图像嵌入到div中，这完全正常。图像成为div的背景，然后我在图像上方有文本 - 所有这些都很好地工作。

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

我尝试在CSS和JS中使div透明，但整个包括文本在内的div都受到影响，这与初衷相悖。然后当我尝试在CSS中使用RGBA样式时，图像不受影响。

因此，我需要通过JS加载到div中的图像略微透明，同时HTML文档中也在div中的文本保持不变。

这是我使用的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>

- Nathan

你好，欢迎来到StackOverflow。这里的要求之一是您提供一段代码示例，以便我们更仔细地查看它。请编辑您的答案并添加您编写的代码，否则很难帮助您解决问题。 - m0meni

阅读有关 [mcve] 的内容。 - zer00ne

我已经添加了一些示例代码，希望能有所帮助。 - Nathan

我为您创建了一个代码片段。它显示JS无效 - 您需要将var images = new Array images[1] = "gun1.jpg", images[2] = "gun2.jpg", images[3] = "gun3.jpg",更改为var images = [ images[1] = "gun1.jpg", images[2] = "gun2.jpg", images[3] = "gun3.jpg"]-请注意逗号的缺失和[]的使用。 - mplungjan

2个回答

1

使用一个嵌套的 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>内部。

- Valentin Coudert

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zer00ne · Accepted Answer

更新

添加了您的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/zh-CN/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>