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>

Answer 2

将 z-index 属性设置为-1

＆＃13;

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

＆＃13;

 <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="magic-of-blue-universe-images.jpg" alt="orange scorpio image">
      </figure>
   </form>

＆＃13;

插入表单顶部但是表单输入的图像现在是块

2 个答案: