如何使背景圖像選擇div？

我在我的頁面中有一個圖像，它作爲div的背景加載。我想這個div與用戶溝通，就好像它是一個<img scr="..."。 如何讓這個div可選？用戶可以輕鬆選擇img而不是div不含內容。我嘗試了user-selectable的不同值，但它似乎不以任何方式分割。如何使背景圖像選擇div？

聲明：我不能使用<img src=""/>，因爲我的圖片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>

來源

2017-04-30 deathangel908

聽起來像是[X Y問題]（http://xyproblem.info/），是JS好嗎？如果你絕對不能使用標籤。 – Stickers

由於您使用的是<div>元素來渲染圖像，只需選擇它不可能在你所描述的方式。你可以，但是，通過src屬性使用位於你的CSS文件的URL在<img>標籤如下面的代碼片段完成：

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>標籤將成爲包括網頁可訪問性在內的無數方式的更好選擇（屏幕閱讀器將會非常困難地理解空的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>

來源

2017-04-30 22:53:41 natejms

如何使背景圖像選擇div？

回答

相關問題