html - 图像插入到表单顶部但表单输入现在被阻止

Question

我有一个图像，我想在 html 上的表单顶部显示不透明度，但是当图像位于表单顶部时无法单击表单输入。 有没有一种方法可以实现这一点，而无需将其加载为背景或执行 photoshop 文件加载它具有背景。我更愿意将图像放在表格文字的顶部而不是下面。

我也在加载 Bootstrap 。

CSS:

.scorpion {
  width: 550px;
  opacity: 0.3;
  z-index: 0;
  position: absolute;
  right: 480px;
  bottom: 250px;
}

   

   

<form name="Questions-me" method="post" id="Questions-me" action="">
  <legend>About Me</legend>
  <label>1- What is my favorite color?
    <br>
    <input type="color" name="color" id="color">
  </label>
  <label>2- What is my favorite shape?
    <br>
    <div class="row">
      <div class="checkOption">
        <input type="radio" name="shape" id="shape-heart"> Heart
        <br>
        <input type="radio" name="shape" id="shape-pentagone"> Pentagone
        <br>
        <input type="radio" name="shape" id="shape-square"> Square
        <br>
        <input type="radio" name="shape" id="shape-triangle"> Triangle
        <br>
        <input type="radio" name="shape" id="shape-rectangle"> Rectangle
        <br>
        <input type="radio" name="shape" id="shape-circle"> Circle
        <br>
        <input type="radio" name="shape" id="shape-star"> Star
        <br>
        <input type="radio" name="shape" id="shape-cross"> Cross
        <br>
      </div>
    </div>

    <figure>
      <img class="scorpion" src="img/orangeScorpion.png" alt="orange scorpio image">
    </figure>
</form>  

  

Answer 1

在将图像保持在顶部的同时并没有真正的方法来做到这一点。表单需要在顶部才能被点击。但是我们可以像设置图像一样设置它的透明度，以便它看起来被图像淡化了。我相信这可以实现您正在寻找的整体效果。

.scorpion {
	width:550px;
	z-index:-1;
	position:absolute;
	left: 0;
	bottom:0;
	
}

 form {
   opacity: 0.6;
 }  

   

              	<form name="Questions-me" method="post" id="Questions-me" action="">
                
                <legend>About Me</legend>
                <label>1- What is my favorite color?<br><input type="color" name="color" id="color" ></label>
                <label>2- What is my favorite shape?<br>
                	<div class="row">
                	<div class="checkOption">
                        <input  type="radio" name="shape" id="shape-heart" > Heart<br>
                        <input  type="radio" name="shape" id="shape-pentagone"  > Pentagone<br>
                        <input  type="radio" name="shape" id="shape-square" > Square<br>
                        <input  type="radio" name="shape" id="shape-triangle" > Triangle<br>      
                        <input  type="radio" name="shape" id="shape-rectangle" > Rectangle<br>
                        <input  type="radio" name="shape" id="shape-circle" > Circle<br>
                        <input type="radio" name="shape" id="shape-star" > Star<br>
                        <input  type="radio" name="shape" id="shape-cross" > Cross<br>
                    </div>
                    </div>
               
    <figure>
    		<img class="scorpion" src="https://placehold.it/650x290" alt="orange scorpio image">
    	</figure>
   </form>