如何删除图像上的选择

我想删除页面上所有图像上的选择 - 突出显示。我发现了一些有益的补充，如：如何删除图像上的选择

CSS

img { 
    -webkit-user-select:none; 
    -khtml-user-select:none; 
    -moz-user-select:none; 
    -o-user-select:none; 
     user-select:none; 
     pointer-events:none 
}

但是，当我按下我的鼠标按钮，选择多的东西，或按Ctrl+A为“全选”我的图片得到与蓝色色调突出。我试图通过改变它：

CSS

img::selection  {background:transparent;color:inherit;} 
img::-moz-selection {background:transparent;color:inherit;}

但没有任何效果。

有人有一个有用的解决方案，还是没有？

P.S. ：我不在乎选择我的图像 - 我只是想摆脱那种蓝色的形状。

来源

2014-09-12 Kris

尝试添加风格：轮廓：0 – Brian 2014-09-12 22:10:51

忘了提 - 测试它已经和你能想象 - 将无法正常工作 – Kris 2014-09-13 04:44:12

[http://jsfiddle.net/ zsbhczkk /]（http://jsfiddle.net/zsbhczkk/）铬是好的 – Pinal 2014-09-17 10:05:26

这里去我想出了...

1一个古怪的解决方案）一些测试，我发现，这只是发生在Mozilla浏览器之后。当代码为

img::selection { 
    background: transparent; 
}

设置时，其他浏览器不显示图像上的蓝色选择。

2）即使mozilla - 只有图像元素的问题。但是background-image的其他元素服从::selection规则。

所以技术上我们可以解决这个假设我们在我们设置为显示的每个img元素后，我们的标记添加一个空跨度：无;

然后，我们可以添加一些只能在firefox中运行的CSS，它将图像设置为display:none并在相邻的跨度上放置背景图像。

像这样：

FIDDLE

img::selection { 
 
    background: transparent; 
 
} 
 
img + span { 
 
    display: none; 
 
} 
 

 
@-moz-document url-prefix() { 
 
    img { 
 
     display: none; 
 
    } 
 
    
 
    img + span { 
 
     background: url(http://placehold.it/200x200) no-repeat; 
 
     width: 200px; 
 
     height: 200px; 
 
     display: block; 
 
    } 
 
}

<div>Hello there </div> 
 

 
<img src="http://placehold.it/200x200" /><span></span> 
 

 
<div>Hello there </div>

1： http://jsfiddle.net/GMuzV/30/

来源

2014-09-17 10:51:32 Danield

好吧，它工作的很好 - 可惜我忘了提及我需要标签本身的SEO目的。如果今天没有找到其他解决方案 - 您将获得您的研究和工作的赏金奖励;） – Kris 2014-09-17 11:17:02

我不打算消除img元素。我的解决方案建议只在其上设置“display：none”，也仅对forefox设置。这不应该干扰搜索引擎优化，因为标记保持几乎相同（除了额外的跨度） – Danield 2014-09-17 11:25:04

你真的认为谷歌机器人不能降低你的搜索引擎优化，因为关键要素显示：无;或可见性：隐藏; ？那么为什么人们有大的可见tagclouds或页脚？ – Kris 2014-09-17 18:12:14

一个DOM元素的这个禁用高亮：

function disableSelection(target){ 
    if (typeof target.onselectstart!="undefined") // if IE 
     target.onselectstart=function(){return false} 
    else if (typeof target.style.MozUserSelect!="undefined") // if Firefox 
     target.style.MozUserSelect="none"; 
    else // others 
     target.onmousedown=function(){return false;} 

    target.style.cursor = "default"; 
}

使用方法如下：

disableSelection(document.getElementById("my_image"));

来源

2014-09-19 21:26:30 KaMZaTa

我很欣赏你的作品，但Firefox仍然用这段代码搞砸了：/ – Kris 2014-09-20 11:44:37

如何删除图像上的选择

回答

相关问题