CSS或JavaScript來突出顯示特定區域的圖像不透明度

我期待着做一些事情like this但CSS或JavaScript。CSS或JavaScript來突出顯示特定區域的圖像不透明度

我需要突出顯示圖像的某個部分，但是我發現的所有內容都是如何在Photoshop中執行此操作。我可以用CSS或者JavaScript來做到這一點嗎？

我是否問正確的問題？

編輯：

那麼這裏是一個great submission但我有一個跟進的問題：

我需要這爲移動設備和縱向和橫向的意見，以及許多設備，如：的iOS，iPad的， Android，WebOS等等。所以我不確定的固定位置會起作用。

有什麼建議嗎？

來源

2011-02-25 Phill Pafford

你可以使用帶有絕對定位的div背景位置如下：

CSS：

.container { 
    position:relative; 
    height:455px; 
    width:606px; 
} 

.container div { 
    position:absolute; 
    background-image:url(http://www.beachphotos.cn/wp-content/uploads/2010/07/indoensianbeach.jpg); 
} 

.container .bg-image { 
    opacity:0.3; 
    height:455px; 
    width:606px; 
} 

.container div.highlight-region { 
    height:50px; 
    width:50px; 
    opacity:0; 
} 

.container div.highlight-region:hover { 
    opacity:1; 
}

HTML：

<div class="container"> 
    <div class="bg-image"></div> 
    <div class="highlight-region" style="top:50px;left:50px;background-position: -50px -50px;"></div> 
    <div class="highlight-region" style="top:150px;left:150px;background-position: -150px -150px;"></div> 
</div>

請參閱http://jsfiddle.net/MT4T7/爲例

信用到beachphotos.com使用他們的形象。

編輯（對OP評論的迴應）：另請參閱http://jsfiddle.net/zLazD/我關閉了懸停方面。還添加了一些邊框。

CSS變化：

.container div.highlight-region { 
    height:50px; 
    width:50px; 
    border: 3px solid white; 
} 

/* removed :hover section */

來源

2011-02-25 15:58:27

謝謝，是的，我希望圖像突出顯示某個部分，而其餘部分較暗但透明。我需要一個圖像，因爲它是一個移動網站，我想減少加載時間。 – 2011-02-25 16:14:49

嗯不能得到任何工作的例子 – 2011-02-25 16:45:43

我剛剛編輯出的前兩個是最好的。包括一個鏈接到一個工作示例。請注意，在我的示例中，區域只在懸停時突出顯示。 – 2011-02-25 16:49:11

你肯定能。例如，大多數作物插件提供「突出顯示」作爲其用戶界面的基礎。所以對於一個完整的跨瀏覽器解決方案，只需使用現有的插件，如Jcrop。

當然，您可能希望它是固定的，在這種情況下，您可以通過編程方式告訴插件哪一部分突出顯示，並且用戶不應該移動它，然後它將充當突出顯示器，不是收割機。

來源

2011-02-25 16:01:44 davin

這些都是你可以採取以突出顯示圖像的一部分步驟：

訪問JavaScript中的形象，後動態添加另一相同的圖像立即。（這可以在HTML中完成，但它會改變標記的語義）
將第二個圖像放在第一個圖像上
在第二個圖像上應用css掩碼，以便只有「突出顯示」部分顯示up
當用戶將鼠標懸停在圖像的容器上時，調整第一個圖像的不透明度。

如果需要，我可以在後面提供更多技術細節。

來源

2011-02-25 16:13:35 zzzzBov

你也許可以僞造它，這裏是一個示例： http://jsfiddle.net/erick/JMBFS/3/

我覆蓋的圖像用不透明的元素。元素的顏色與圖像的背景相同。使用z-index將其置於頂端。

來源

2011-02-25 16:25:48 erickb

我喜歡這種方法，但我有另一個後續問題。這是針對移動設備的，我如何對縱向和橫向視圖進行編碼？以及多種設備上，例如iOS，iPad，Android等... – 2011-02-25 16:41:08

在示例代碼中，只要您在HTML上實施，圖像應始終以左上角爲終點，而不管方向如何。如果您正在開發本地iOS或原生Android應用程序，那麼我真的無法提供幫助，因爲我不在這些平臺上工作（還）。 – erickb 2011-02-25 16:48:23

CSS或JavaScript來突出顯示特定區域的圖像不透明度

回答

相關問題