背景图像区域可点击且响应迅速

Question

<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>LED Control</title>
 <style>
  html { 
  background: url(Screen_Shot_20160101_at_181141.png) no-repeat fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
   background-size:100% 100%;
}
 </style>

 </head>
         <body>
         Home Control: 
        <form method="get" action="gpio.php">

<br>

<input type="submit" name="alloff" value="All Off">
<br>
        </form>


 <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">


<br>

ROOM NOA:
<br>


      <button type="submit" name="remote" value="5365060" />Lights On</button>
      <button type="submit" name="remote" value="5365057" />Lights Off</button>

<br>
<br>
ROOM AMIT:
<br>
<br>

<button type="submit" name="remote" value="10054728" />Lights On</button>
      <button type="submit" name="remote" value="10054724" />Lights Off</button>


<br>
Electric Shutters:
<br>
<br>
Living Room:

 <button type="submit" name="remote_o" value="-g 21195 -n 8 -v" />Open</button>
        <button type="submit" name="remote_c" value="-g 21195 -n 16 -v" />Close</button>

   </form>

         <?php
         $setmode17 = shell_exec("/usr/local/bin/gpio -g mode 17 out");
        

 if ( isset($_POST['remote']) ) {
   shell_exec('sudo /home/pi/433Utils/RPi_utils/codesend '.$_POST["remote"].'> /var/tmp/remote.log' );
   
}


    
 else if ( isset($_POST['remote_o']) ) {
   shell_exec('sudo /home/pi/livolo/transmitters/livolo/livolo '.$_POST["remote_o"].'> /var/tmp/remote_c.log' );
   
}

 else if ( isset($_POST['remote_c']) ) {
   shell_exec('sudo /home/pi/livolo/transmitters/livolo/livolo '.$_POST["remote_c"].'> /var/tmp/remote_c.log' );
   
}


  else if(isset($_GET['alloff'])){
      shell_exec('sudo /home/pi/433Utils/RPi_utils/codesend 10054724');            
      shell_exec('sudo /home/pi/433Utils/RPi_utils/codesend 5365057');
                 echo "All is off";
         }


         ?>
         </body>
 </html>

我有一个 HTML 页面有响应式背景图片。我想在我的背景图片上创建可点击区域（2 个区域）。它必须与 2 个蓝色框位于同一位置。我希望它具有响应性，这意味着这些区域应该粘在蓝色框上。enter image description here

Answer 1

由于您的背景是响应式的，因此您可以使用具有基于百分比的尺寸和定位的元素。

html {
  background: url(http://i.stack.imgur.com/lC4x1.jpg) no-repeat fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-size: 100% 100%;
}

.bluebox {
  position: absolute;
  top: 65%;
  border: 3px solid red;
  height: 12%;
  width: 8%;
  left: 40%;
}

#bluebox2 {
  left: 50.5%;
}

<div id="bluebox1" class="bluebox"></div>
<div id="bluebox2" class="bluebox"></div>

jsFiddle: https://jsfiddle.net/azizn/5gsj9owv/

您可以修改值以匹配您的确切位置，如果您想要 像素完美 匹配，也可以使用 CSS 变换属性 .

背景图像区域可点击且响应迅速

Background Image areas clickable and responsive

html

javascript

css

jquery

responsive