製作圖片不可點擊/不可拖拽

我有一個帶有文本和鏈接的圖像，我想使它能夠按照我的意願突出顯示文本，而不會冒着拖動背景圖像的風險。製作圖片不可點擊/不可拖拽

該網頁已經有一個背景圖片，並且該圖片是該內容的輔助背景。

我試着將它設置爲內容設置的邊界框的背景，但這似乎不可能。如果可能的話，我想設置圖像，以便它不能被點擊或拖拽。

我只有使用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;}

來源

2013-05-01 user2340167

您需要添加很多層，用z-index – Romain 2013-05-01 17:03:05

嘗試，你可以提供。無論是HTML和CSS – underscore 2013-05-01 17:10:10

不存在你的代碼。 – j08691 2013-05-03 17:21:47

您正在尋找的用戶選擇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

來源

2013-05-01 17:10:53

謝謝，它現在不能通過突出顯示來選擇，但它仍然可以被點擊，拖拽和丟棄。那麼在那裏的一半。 – user2340167 2013-05-03 17:22:54

你就不能設置在CSS背景？

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

來源

2013-05-03 17:22:58 Appleshell

你的意思是以某種方式在css中將圖像定義爲背景？我試圖將圖像設置爲邊界框的背景一次，但它似乎沒有工作。雖然也許我做錯了。 – user2340167 2013-05-03 18:59:13

只要讓所有東西都保持原狀，除了在'

'之間刪除''並添加'width：300px;高度：300像素;背景：url（image.jpg）;'到'＃image' css。 – Appleshell 2013-05-03 21:36:20

好的。我試了一下，但根本沒有出現。 – user2340167 2013-05-07 17:35:53

製作圖片不可點擊/不可拖拽

回答

相關問題