CSS中的圖片顏色疊加

你好我有一張用photoshop製作的圖片。它只有一種顏色（html的符號）。它由＃d66a00（橙色陰影）顏色製成。我需要添加效果懸停，該圖片緩慢傳遞到另一種顏色。CSS中的圖片顏色疊加

例如。我現場有一張照片，它是橙色的。當我將鼠標放在圖片上時，他將從橙色變爲藍色。是這樣的事情可能與CSS3或JavaScript，或者我將需要使用兩張圖片，並在CSS中更改背景？

2015-09-27 MegoSoft

編輯迴應您的回覆：

那麼你有三種選擇。

第一個選項就像你建議創建兩個圖像，把它們放在eachother之後，並使用css來改變前方圖像的不透明度。這種方法對於頁面加載時間來說是最差的。

第二種方法是在Photoshop中更改圖像，使暗橙色部分爲透明（0％不透明度），淡橙色部分爲透明白色，約10％不透明度。在CSS中，然後在＃d66a00的圖像上放置一個背景。在懸停時，將此背景更改爲藍色。

最後一個選項是使用圖像（如https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg）的SVG和將它嵌入在HTML（見http://www.w3schools.com/svg/svg_inhtml.asp）所以你複製HTML裏面的整個SVG代碼。然後你可以使用css來操作svg的所有部分。您可以添加類SVG元素，並使用CSS，改變自己的「補」（這是在SVG背景）

第一個答案：

如果我理解正確的話，您的圖片是一個矩形這是一致的顏色＃d66a00？

在這種情況下，您可以使用此顏色作爲背景創建div，而不是使用圖像。然後在懸停時更改顏色。

<style> 
    .orange-rectangle{ 
     background-color:#d66a00; 
     width:5em; 
     height:5em; 
     transition:background-color 200ms; 
    } 
    .orange-rectangle:hover{ 
     background-color:blue; 
    } 
</style> 
<div class="orange-rectangle"></div>

來源

2015-09-27 20:29:31 Hacktisch

沒有，我需要改變形象，沒有背景的顏色...例如，從這個彩色圖像：https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/ HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png我需要獲得藍色......沒有其他顏色，只有藍色。 – MegoSoft

我改變了答案，你有幾個選項 – Hacktisch

好吧，你知道任何svg創造者工具嗎？ – MegoSoft

我處理這個問題的方式是創建兩個圖像並在懸停時隱藏/顯示圖像。

圖像保持器div保存要替換的圖像 - 當它懸停在圖像上並且defaultImage類消失時，將其替換爲具有類hoverImage的圖像。

<style> 
     .imageHolder .defaultImage { 
      display:inherit; 
     } 
     .imageHolder .hoverImage{ 
      display:none; 
     } 
     .imageHolder:hover .defaultImage { 
      display:inherit; 
     } 
     .imageHolder:hover .hoverImage{ 
      display:none; 
     } 
</style> 

<div class = 'imageHolder'> 
     <img src = 'path/to/first/image.jpg' class = 'defaultImage'> 
     <img src = 'path/to/second/image.jpg' class = 'hoverImage'> 
</div>

來源

2015-09-27 20:55:36

CSS中的圖片顏色疊加

回答

相關問題