防止圖像和文本被選擇

我有一個圖像作爲背景圖像被入侵（如圖here）。我注意到，如果我將鼠標拖過它，它會選擇圖像，以便它不能被取消選擇。我試過以下代碼無濟於事：防止圖像和文本被選擇

<style type="text/css"> 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     img#bg { 
      position:fixed; 
      top:0; 
      left:0; 
      width:100%; 
      height:100%; 
     } 
     #content { 
      position:relative; 
      z-index:1; 
      top:0px; 
      left:0px; 
     } 
     *.unselectable { 
      -moz-user-select: -moz-none; 
      -khtml-user-select: none; 
      -webkit-user-select: none; 
      -o-user-select: none; 
      user-select: none; 
     } 
    </style>

任何想法？

來源

2011-05-06 FreeSnow

可能重複http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection -highlighting） – kapa 2011-05-06 17:45:26

我想你應該使用'-moz-user-select：none;'而不是'-moz-user-select：-moz-none;'。否則，我認爲這應該工作。 – 2011-05-06 17:49:05

PS如果你想要一個不錯的背景擔架使用bgStretcher.js在我的網站上工作就像一個夢 - 但我砍了它到我自己的版本緩存/ preload圖像導致我加載高清圖像..和硬編碼noSelect在那裏.. – ppumkin 2011-05-06 17:58:57

添加到您的樣式表

.selectDisable { 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 

.selectEnable { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
}

只是類selectDisable添加到您希望被選中，以防止元素。

拖放效果發生在webkit上（chrome，safari，opera）。它不會發生在Firefox上。

如果您有文本內容，這不適用於您的整個文檔，因爲那樣您將無法選擇文本，這不是非常用戶友好的。

您還可以通過在圖像頂部添加另一個空的div來防止拖動，並使用相同的selectDisable類。

這裏是一個工作示例：
http://jsfiddle.net/Ma9MT/1/

來源

2011-05-06 17:43:35 ppumkin

我不喜歡我不明白這與提問者已經嘗試的方式有什麼不同。他沒有對他的整個文件進行任何申請。他剛剛命名爲'.unselectable'而不是'.selectDisable'類。 – 2011-05-06 17:50:01

Ahh ok然後做一個jquery $（'body'）。addClass（'selectDisable'）;但不建議像我在我的答案中提到的那樣，將整個BODY應用於選擇無 - 僅適用於元素 – ppumkin 2011-05-06 17:53:48

簡單！ http://jsfiddle.net/Ma9MT/1/ – ppumkin 2011-05-06 17:56:15

如果您正在使用jQuery我寫了一個很小的jQuery插件 - 包裝，確實差不多就是ppumkin寫道：

（插件是在JS部分以及一個示例用法）http://jsfiddle.net/gryzzly/HtvB8/

來源

2011-05-06 18:07:46

爲什麼要做一個插件，如果你所需要的只是應用一種風格。你的插件有一個醜陋的副作用..如果我嘗試在webkit中選擇它拖動包裝的容器。 – ppumkin 2011-05-06 18:54:13

對我來說，它不會發生 - 不是在鉻中，也不在safari中。 - 我在OS X上。你在Windows上測試過嗎？ – 2011-05-07 10:38:34

這很有趣。我從來沒有在Mac Safari中測試它 - 只有贏得Safari瀏覽器，它是OK ..也Chrome = Safari ie webkit引擎..所以我不知道.. – ppumkin 2011-05-07 10:42:34

如果您加載圖像爲div的背景，您不能選擇它。

EDIT

<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>

[CSS規則來禁用文本選擇高亮]（的

來源

2011-05-06 18:24:52

它的確如此 - 但可能會有其他副作用，但下次添加一些代碼！ – ppumkin 2011-05-06 18:58:50

防止圖像和文本被選擇

回答

相關問題