Question

我的部分Uni模块要求我制作一个使用随机元素混合故事的网页。我在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>

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也适用于元素中的所有内容。在Snippet中，我们将带有内容的元素和带有背景图像的元素分开。

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

<强>段

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用具有半透明白色背景的嵌套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时更改图像不透明度

2 个答案: