如何使帶有背景圖像的div可選？

Question

我的頁面中有一張圖片，它已作為div的背景加載。 我希望該div與用戶進行交流，就好像它是<img scr="..." 。 如何使該div可選？ 用戶可以輕松選擇img但不能選擇沒有內容的div 。 我嘗試了不同的user-selectable值，但它似乎沒有以任何方式div。

免責聲明：我不能使用<img src=""/>因為我的圖像網址位於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實體  （單個空格）在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>