使图像不可点击/不可拖动答案

【问题标题】：Making an image unclickable/undragable使图像不可点击/不可拖动
【发布时间】：2013-05-01 16:59:22
【问题描述】：

我有一个带有文本和链接的图像，我想制作它以便我可以随意突出显示文本，而不会冒着拖动背景图像的风险。

网页已有背景图片，此图片是内容的辅助背景。

我尝试将其设置为设置内容的边界框的背景，但这似乎是不可能的。如果可能的话，我想将图像设置为既不能点击也不能拖动。

我只有 html 和 css 的经验。

这是我的代码 html:

<div id="bounding">

<div id="backgroundimage"><img src="image.png" width="1010" height="739"></div>

<div id="image"><img src="image.jpg" width="300" height="500"></div>

<div id="text2">
<h2><CENTER>Tital</CENTER></h2>

<h5>Text</h5>

<p>text</p>

<h5>text</h5> 
</div>

CSS：

#bounding {position: relative;hight:739px;width:1010px;border:2px;margin-left:auto;margin-right:auto;margin-top:auto;z-index:7;margin-top:40px;}

#image {position:absolute;left:635px;top:160px;z-index:2;}

#text2 {position:absolute;z-index:4;left:100px;top:206px;width:513px;height:455px;padding right:22px;overflow-y:auto;overflow-x:hidden;scrollbar-base-color: #666666; scrollbar-arrow-color: #9ACD32;color: #494949;}

#backgroundimage {z-index:1;}

【问题讨论】：

需要添加很多层，用z-index试试
你能提供你的代码吗.html和css
<CENTER> 不存在。
@j08691 我不是粗鲁的意思，但是中心标签确实存在，它被所有浏览器支持，我可以在我的网站上看到它...
你并不粗鲁，只是不知情。 <center> 标签在大约十年前就被弃用了，也许更多，而且在 HTML5 中根本无效。仅仅因为某些浏览器呈现它，并不意味着您应该使用它。正如W3 says，“不，真的，不要使用它。”

标签： html css image right-click

【解决方案1】：

您正在寻找用户选择的 CSS3 属性。

img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;  
}

http://css-tricks.com/almanac/properties/u/user-select/

https://developer.mozilla.org/en-US/docs/CSS/user-select

【讨论】：

谢谢，现在不能通过高亮选择，但仍然可以点击、拖放。到了一半。

【解决方案2】：

你不能在css中设置背景吗？

#image 
{position:absolute;left:635px;top:160px;z-index:2;background:url(image.jpg);}

【讨论】：

您的意思是在css中以某种方式将图像定义为背景吗？我曾尝试将图像设置为边界框的背景，但似乎不起作用。虽然也许我做错了。
让一切保持原样，除了删除<div id="image"> </div>之间的<img ... />并将width: 300px; height:300px; background:url(image.jpg);添加到您的#image css。