如何正确更改背景不透明度答案

【问题标题】：How to change background opacity correctly如何正确更改背景不透明度
【发布时间】：2017-06-24 07:28:34
【问题描述】：

所以我有一个 div，其中包含一个带有许多输入字段的表单。

如果我单击一个按钮，所有输入字段都将被禁用，并且这些输入字段的不透明度应更改为 0.2 左右。

还会弹出一个图像，（它style.display 设置为none，现在onclick 设置为block）因此，虽然元素的不透明度被完全禁用并变得透明，但@987654325如果后台有输入框，弹出的图片中的@不起作用。

有没有办法不让输入字段消失，但仍然能够在每个像素处按下图像？

<div><img id="i" style="display:none" onclick=dothis(event) src="dsds.png" /></div>
<div id="d"><input id="c" onclick="dis()" type=button value="hey"><input id="f" type=text ></div>

<script>

function dis(){
document.getElementById("i").style.display="block";
document.getElementById("d").style.opacity="0.2";
document.getElementById("c").disable=true;
document.getElementById("f").disable=true;
}

【问题讨论】：

您忘记将代码添加到问题中。
@Justinas 添加了代码 ;) 问题是如果在背景图像的位置正好有一个输入字段，我无法在那里按下图像，还有一些奇怪的原因图像也变得透明不是 0.2 但你可以看穿它，不知道为什么
“弹出的图片中的onclick不起作用” 不确定是什么问题？你能描述“不起作用”吗？ dothis 定义在哪里？
@guest271314 ...."如果后台有输入框。" dothis 方法只是提醒某事
javascript, html 的问题是什么？

标签： javascript html opacity

【解决方案1】：

要更改点击时的不透明度，您可以使用 jquery，如下所示：

$(document).ready(function() {
  $("#button").click(function(){
    $("#content_to_fade").css('opacity', '0.2');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div>
	<p id="content_to_fade">Test</p>
	<button id="button">Button</button>
</div>

【讨论】：

问题不在于我不知道如何设置不透明度 xD 问题是当它们是不透明度为 0.2 的图像背景中的输入字段时，您无法按下在这个地方的形象。似乎不透明是由事件造成的，如此处所述link b
@AndroidAmatuer99 如果您使用引导程序，则必须将 z-index 设置为比输入字段之一高的图像（通过使用引导程序最后几天输入不是这样的）用 z-index 0 覆盖）。也许它有帮助
@mtizziani 是我要找的 z-index
在这种情况下，您可以使用 z-index。