如何使背景图像选择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？

回答

相关问题