Modifier l'opacité de l'image lors de l'utilisation de GetElementById

Question

Une partie de mon module Uni nécessite que je crée une webstory qui utilise des éléments aléatoires pour mélanger l'histoire. J'utilise GetElementById dans JS pour intégrer une image aléatoire d'un tableau dans un div, ce qui fonctionne parfaitement bien. L'image devient l'arrière-plan de la div, et j'ai ensuite du texte sur le dessus de l'image - encore une fois tout cela fonctionne parfaitement bien.

Cependant le problème est que je veux que l'image soit légèrement transparente pour que le texte soit plus facile à lire, cependant peu importe quelle solution j'essaye, je ne peux pas l'obtenir pour fonctionner.

J'ai essayé de rendre le div transparent à la fois en CSS et en JS, mais ensuite tout le div y compris le texte est effectué ce qui fait échouer le point. Ensuite, lorsque j'essaie le style RGBA en CSS, l'image n'est pas affectée. Donc, ce dont j'ai besoin, c'est que l'image qui est chargée dans le div par JS soit légèrement transparente, alors que le texte qui est aussi dans la div dans le document HTML reste intact.

C'est la JS J'utilise pour sélectionner au hasard une 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>

Answer 1

Utilisez un div imbriqué avec fond blanc semi-transparent.

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

En outre, je fixerait tout par rapport au style dans une feuille de style, ou tout au moins à l'intérieur d'un <style></style>.

Answer 2

MISE À JOUR

Ajout votre JS et fixé un peu. Notez l'ajustement à l'expression aléatoire.

---

Peut-être que cela vous aidera.

• Utilisez un élément qui va contenir 2 autres éléments, donner le récipient position:relative et z-index:-2

• Ensuite, les 2 éléments à l'intérieur devraient avoir position:absolute.

• suivant donne l'élément supérieur z-index:-1, background:url(http://image-host.com/path/to/img.jpg) et opacity:.5

• Ensuite, le deuxième élément devrait avoir le texte et tout ce que vous voulez visible. Donnez cet élément z-index:1.

La raison pour laquelle l'opacité ne fonctionnait pas la façon dont vous devez travailler est parce que opacity applique à tout ce qui est l'élément ainsi. Ici, dans le Snippet, nous avons superposé un élément avec du contenu et un élément avec une image d'arrière-plan séparément.

RÉFÉRENCE: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>