1. ホーム
  2. 質問と答え
  3. 複数の画像のチェックボックス

複数の画像のチェックボックス

2016-11-30 7 views
0

私は（CSS経由）1つのチェックボックスに画像を配置する方法を知っている複数の画像のチェックボックス

しかし、この例：

checkboxes

私はすべての数で絵にチェックボックスを配置しますこの位置に正確に。チェックボックスは、写真の横にある場合もあれば、正確な位置にある場合もあります。

どうすればよいですか？

ありがとうございました

出典

2016-11-30 filledat

答えて

2

絶対位置にチェックボックスを配置しますか？あなたは、CSSでabsoluteを使用することができます。

div.container { 
 
    position: relative; 
 
} 
 
.chk1 { 
 
    position: absolute; 
 
    left: 50px; 
 
    top: 50px; 
 
} 
 
.chk2 { 
 
    position: absolute; 
 
    left: 65px; 
 
    top: 65px; 
 
} 
 
.chk3 { 
 
    position: absolute; 
 
    left: 80px; 
 
    top: 80px; 
 
}
<div class="container"> 
 
    <img src="https://i.stack.imgur.com/aS3WP.jpg" /> 
 
    <input type="checkbox" class="chk1" /> 
 
    <input type="checkbox" class="chk2" /> 
 
    <input type="checkbox" class="chk3" /> 
 
</div>

あなたが望む正確な正しい場所でそれらを設定するためにleftとtop値を変更することができます。

出典

2016-11-30 21:41:33 Dekel

0 
<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.pic{ 
background: url("https://i.stack.imgur.com/aS3WP.jpg") no-repeat; 
width:242px; 
height:197px; 
position: relative; 
} 
.poin1{ 
left: 165px; 
bottom:50px; 
position: absolute; 
} 
.poin2{ 
left: 165px; 
bottom:90px; 
position: absolute; 
} 
.poin3{ 
left: 155px; 
bottom:125px; 
position: absolute; 
} 
.poin4{ 
left: 180px; 
bottom:122px; 
position: absolute; 
} 
</style> 
</head> 
<body> 

<div class="pic"> 
<input type="checkbox" class="poin1"> 
<input type="checkbox" class="poin2"> 
<input type="checkbox" class="poin3"> 
<input type="checkbox" class="poin4"> 

</div> 


</body> 
</html> 


             
  
 
   
 
    
<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <style type="text/css"> 
 
    .pic{ 
 
    background: url("https://i.stack.imgur.com/aS3WP.jpg") no-repeat; 
 
    width:242px; 
 
    height:197px; 
 
    position: relative; 
 
    } 
 
    .poin1{ 
 
    left: 165px; 
 
    bottom:50px; 
 
    position: absolute; 
 
    } 
 
    .poin2{ 
 
    left: 165px; 
 
    bottom:90px; 
 
    position: absolute; 
 
    } 
 
    .poin3{ 
 
    left: 155px; 
 
    bottom:125px; 
 
    position: absolute; 
 
    } 
 
    .poin4{ 
 
    left: 180px; 
 
    bottom:122px; 
 
    position: absolute; 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 

 
    <div class="pic"> 
 
    <input type="checkbox" class="poin1"> 
 
    <input type="checkbox" class="poin2"> 
 
    <input type="checkbox" class="poin3"> 
 
    <input type="checkbox" class="poin4"> 
 

 
    </div> 
 

 

 
    </body> 
 
    </html>

出典

2016-11-30 21:50:42 alifallahi

関連する問題

 関連する問題