透明和半透明部分的圖像

我想創建一個圖像，其中透明和半透明的部分，以便如果我給，例如顏色x作爲背景，透明部分將顯示X顏色和半透明部分將顯示顏色X的漸變陰影。透明和半透明部分的圖像

我需要這樣的圖像用於將由具有不同顏色主題的客戶端使用的模板。

編輯：問題是如何在圖像中創建透明的&半透明部分？任何指針請。

編輯：我讓我的問題更清楚。在附圖中，有一個透明區域。想法是在圖像中具有透明區域以及半透明區域（指向區域的指針，當前不是半透明的），以便如果我給出紅色作爲bg顏色，透明區域將顯示紅色&半透明區域會顯示漸變的紅色陰影。我想知道如何讓指針附近的區域在瘸腿處變成半透明的。請任何想法。

enter image description here

謝謝。

來源

2012-05-21 CodeTweetie

什麼是問題？你有沒有嘗試過？ PNG支持alpha透明度（IE6除外，但有修復）。 – kapa

在現代瀏覽器中的PNG圖像將做到這一點。 –

http://en.wikipedia.org/wiki/Portable_Network_Graphics – Yoshi

使用PNG-24圖像，並設置保存它的元素的background-color：

<div id="header" style="background-color: #f00"></div> 

<style> 
    #header { 
     background: transparent url("header-background.png") no-repeat 50% 0; 
     height: 100px; 
    } 
</style>

直列顏色將覆蓋從CSS的transparent顏色，純色將圖像下面。

來源

2012-05-21 08:49:49

嗨，謝謝你的回答。如何將此png轉換爲png-24格式？ https://dev.avvio.com/svn_convert/arrow.png – CodeTweetie

用上面的png試過了你的想法。內聯顏色代替透明區域顯示，但純色不顯示。它不是我想要的。 – CodeTweetie

如果你想做到這一點在純CSS，你可能會分手的圖片，然後一起風格它像一個PUSLE，然後給每塊磚一類你的風格不同的透明度

.test { 
background-color: #6374AB; 
width: 100%; 
color: #ffffff; 
} 

.opaque1 { // for all other browsers 
    opacity: .5; 
} 

.opaque2 { // for IE5-7 
    filter: alpha(opacity=50); 
} 

.opaque3 { // for IE8 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
}

IE兼容性注意

如果你想的不透明度在所有IE版本的工作，順序應該是：

.opaque { 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first! 
    filter: alpha(opacity=50);     // second! 
}

Reference。

來源

2012-05-21 09:05:33

通過這種方式，您可以在沒有每張照片的情況下使用多張照片進行拍攝，每次都需要重做。因此，可以說你有100張照片，而你自殺80％的不透明度是不正確的，但70是那麼這是我推薦的 –

透明和半透明部分的圖像

回答

相關問題