Wie kann div mit Hintergrundbild ausgewählt werden?

Question

Ich habe ein Bild in meiner Seite und es ist als Hintergrund eines Div geladen. Ich möchte dieses Div mit dem Benutzer kommunizieren, als wäre es ein <img scr="..." mit. Wie kann ich dieses div auswählbar machen? Benutzer kann einfach img, aber nicht div ohne Inhalt auswählen. Ich habe verschiedene Werte von user-selectable versucht, aber es scheint, dass es in keiner Weise div.

Haftungsausschluss: Ich kann <img src=""/> nicht verwenden, da meine Bild-URL in CSS-Datei befindet. Ich kann kein img-Tag mit content CSS-Eigenschaft verwenden, da es in einigen Browsern nicht wie erwartet funktioniert.

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

Da Sie ein <div> Element verwenden, um Ihr Bild zu machen, es ist einfach die Auswahl ist in der Art und Weise nicht möglich, die Sie beschreiben. Sie können jedoch, verwenden Sie die in Ihrem CSS-Datei befindet URL in einem <img> Tag über das src Attribut wie im folgenden Ausschnitt getan:

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">

Dies erzeugt exakt die gleichen Ergebnisse, obwohl die Das Bild kann auch vom Benutzer ausgewählt werden. Die Verwendung eines Bildes anstelle eines Tags <div> wäre in vielerlei Hinsicht eine bessere Wahl, einschließlich der Barrierefreiheit im Web (ein Bildschirmlesegerät würde das leere Element div nur schwer verstehen).

Wenn es wirklich notwendig ist, dass Sie ein leeres Element auf Blockebene verwenden (obwohl ich es nicht empfehlen würde), gibt es eine Problemumgehung. Wenn Sie die HTML-Entität   (ein einzelnes Leerzeichen) in Ihrem div-Element platzieren würden, würde der Speicherplatz sie in einem gewissen Sinne auswählbar machen. Mit dem Leerzeichen können Sie auch verhindern, dass Browser das Element nicht rendern. Beachten Sie, dass dies möglicherweise nicht die gewünschten Ergebnisse liefert, da nur der Speicherplatz ausgewählt wird.

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>