背景画像エリアクリッカブルと </p> <p>

-1

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width" /> 
 
<title>LED Control</title> 
 
<style> 
 
    \t 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: 
 

 
\t <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

出典

2016-04-04 Yousaf Iqbal

ここは初心者です。あなたはリンクを使用して添付された画像を見ることができます（ここに画像の説明を入力してください） –

どのようにして画像を反応性に*しましたか？私たちが作業するための基本的なデモを提供してください。 – Aziz

このコードを使用して\t html { 背景：url（Screen_Shot_20160101_at_181141.png）no-repeat fixed; -webkit-background-size：contains; -moz-background-size：contains; -o-background-size：contains; background-size：contains; background-size：100％100％; } –

バックグラウンドが反応するので、パーセンテージベースのディメンションと配置を持つ要素を使用できます。

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はtransformプロパティを使用することができます。

出典

2016-04-04 17:29:25 Aziz

うわー:-)うまくいきました。ありがとうございました。 –

背景画像エリアクリッカブルと </p> <p>

答えて

関連する問題