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

Posted 2023-03-06

【中文标题】使用 GetElementById 时更改图像不透明度

【英文标题】：Change image opacity when using GetElementById

【发布时间】：2017-06-28 19:02:12

【问题描述】：

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

【问题讨论】：

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

阅读minimal reproducible example

我添加了一些示例代码，希望对您有所帮助

我为你创建了一个 sn-p。它显示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"]-注意缺少逗号和使用[]

【参考方案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 没有按您预期的方式工作的原因是opacity 也适用于元素内的所有内容。在 Snippet 中，我们分别将一个带有内容的元素和一个带有背景图像的元素分层。

参考： 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>

【讨论】：

Valentin 的回答似乎奏效了，所以我暂且不谈。但是，如果我遇到困难，我会在未来再次提及这一点。感谢您花时间为我解释它，谢谢！

没问题，如果您更喜欢C先生的回答，请点击他帖子中的绿色✔。编码愉快。

【参考方案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> 中设置。