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

Question

So I have a div which includes a form with many input fields.

If I click on a button all the input fields are getting disabled and the opacity of these input fields should change to around 0.2.

Also an image kinda pops up, (it style.display was set to none , and now onclick to block ) So while the opacity of the elements gets perfectly disabled and are made transparent, the onclick from the image that pops up doesn't work, if there is an input field in the background.

Is there a way to not complicity vanish the input fields but still being able to press the image at every pixel?

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

Answer 1

to change opacity on click, you can use jquery as shown:

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