Question

我有一个显示表格的网站。表格标题包含文字说明和问号图像（用户可以将鼠标悬停在图片上以获得帮助）。

但我已经请求允许用户突出显示该表并在没有图像的情况下复制它（通过点击并拖动）。

这可能吗？我在这里尝试了这个建议

Preventing an image from being draggable or selectable without using JS

没有运气。

我可以将图片标记为＆＃39; no-copy＆＃39;或者＆＃39; no-select＆＃39;？

Answer 1

使用div元素并使用background-image属性将背景图片设置为div元素的问号。

div元素不包含任何文本，因此无法选择。

只是为了澄清：

<thead>
  <tr>
    <th>header1</th>
    <th>header2 <div class="question-mark"></div></th>
  </tr>
</thead>


.question-mark{
    height: 100%;
    width: 10px;
    background-image: url("question_mark.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

Answer 2

正如其他用户建议的那样，您可以将div用作图像。

但是，如果您希望将图像保留为图像，则可以使用

var img = document.querySelector("#notToDragImg");
img.onselectstart = function(){
                    return false;
                };

阻止选择你的图像（并且不需要jQuery）

Answer 3

防止使用 CSS 选择图像

img {
  user-select: none !important;
  -webkit-user-drag: none;
}

是否可以阻止在网页上选择图像？

3 个答案: