Change image transparency when using GetElementById

Question

Part of my Uni module requires me to create a web version that uses random elements to mix history. I am using GetElementById in JS to embed one random image from an array into a div that works fine. The image becomes the background of the div, and then I have the text on top of the image - again all this works fine.

However, the problem is that I want the image to be slightly transparent, to make the text easier to read, however no matter what solution I try, I cannot get it to work.

I tried to make the div transparent in both CSS and JS, but then the whole div, including the text, will be executed, which will defeat the point. Then, when I try to use the RGBA style in CSS, the image is not executed.

So, I need the image uploaded to the div via JS to be slightly transparent, while the text, which is also in the div in the HTML document, is left untouched.

This is the JS that I use to randomly select an image:

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>

Run codeHide result

Answer 1

Use a nested div with a translucent white background.

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

In addition, I would set everything regarding the style in the stylesheet, or at least internally <style></style>.

Answer 2

UPDATE

JS . .

---

, .

• , 2 , position:relative z-index:-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

SNIPPET

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>

Hide result