如何使 div 与背景图像可选？

Question

我的页面中有一张图片，它作为 div 的背景加载。我希望这个 div 像 <img scr="..." 一样与用户交流。 如何让这个 div select 可用？ 用户可以轻松地 select img 而不是 div w/o 内容。我尝试了 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>

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> 标签在无数方面都是更好的选择，包括网络可访问性（屏幕 reader 将很难理解空的 div 元素）。

也就是说，如果确实有必要使用空的块级元素（尽管我不推荐这样做），则有一个解决方法。如果您要将 HTML 实体  （单个 space）放置在 div 元素中，space 会在某种意义上使其成为可选择的。使用 space 字符，您还可以防止浏览器不呈现该元素。请注意，这可能无法提供预期的结果，因为只会选择 space。

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>

如何使 div 与背景图像可选？

How to make div with background-image selectable?

css

background-image