背景画像でdivを選択するにはどうすればいいですか？

Question

私のページに画像があり、divの背景として読み込まれています。私はこのdivが、<img scr="..."であるかのように、ユーザーと通信するようにします。 このdivを選択可能にするにはどうすればよいですか？ユーザーはimgを選択することができますが、内容なしのdivは選択できません。私はuser-selectableの異なる値を試しましたが、それは決してdivではないようです。

免責事項：私の画像のURLがCSSファイルにあるため使用できません。 imgタグをcontent cssプロパティと一緒に使用することはできません。一部のブラウザでは期待通りに機能しないためです。

div { 
 
    background: url("https://static.pychat.org/images/dark_wall.png") no-repeat 0 0; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin:100px; 
 
}

this text is selectable but image below is not. Click run snippet to see it yourself. <div></div>

Answer 1

あなたのイメージをレンダリングするために<div>要素を使用しているため、単純にそれを選択すると、あなたが記述されている方法では不可能です。次のスニペットで行ったようにあなたは、しかし、src属性を経由して<img>タグにCSSファイルにあるURLを使用することができますけれども

img { 
 
    width: 50px; 
 
    height: 50px; 
 
    margin:100px; 
 
}

By using an img tag, the image is selectable. 
 
<img src="https://static.pychat.org/images/dark_wall.png">

をこれは、まったく同じ結果が得られます画像はまた、ユーザによって選択可能である。 <div>タグの代わりにイメージを使用すると、Webアクセシビリティを含む無数の方法でより良い選択となります（スクリーンリーダーは、空のdiv要素を理解するのが非常に困難です）。

つまり、ブロックレベルの空の要素を使用することが本当に必要な場合（私は推奨しませんが）、回避策があります。 HTMLエンティティ （1つのスペース）をdiv要素に配置する場合、そのスペースはある意味で選択可能になります。スペース文字を使用すると、ブラウザが要素をレンダリングしないようにすることもできます。スペースのみが選択されるため、意図した結果が得られない場合があります。

div { 
 
    background: url("https://static.pychat.org/images/dark_wall.png") no-repeat 0 0; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin:100px; 
 
}

Your div element 
 
<div> 
 
    &nbsp; 
 
</div>