覆蓋背景顏色

我有關於CSS的問題。覆蓋背景顏色

我有2個div，一個是background-color: #000;，另一個是透明PNG文件，一部分沒有背景（所以透明），我們稱之爲background-image: url(images/scrolltotop.png);。

我想要的是用png文件的透明度覆蓋background-color，所以背景不包含我的PNG文件。我給圖片向你展示我的意思：

transparent png file

that what it is without transparency

result

和現在我想（上圖），結果圖像 - 從HTML風格背景。

有沒有辦法用透明度來覆蓋背景色？

enter image description here

編輯：也許這個IMG會告訴你更多，我想要做的（上述）

來源

2013-02-24 Sebastian Koziara

如果PNG是透明的，只需在「滾動到頂部」div – 2013-02-24 19:48:22

上放一個白色背景，但我不想白色背景，希望它是透明的。 – 2013-02-24 20:20:57

CSS面具（只有我相信webkit）可能能夠實現這一點：http：//thenittygritty.co/css-masking – 2013-02-27 22:13:23

background-color: transparent;

你試過了嗎？

編輯

http://jsfiddle.net/FCXGu/3/

border-width: 20px; 
border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch; 
-moz-border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch; 
-webkit-border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;

這需要一點時間來理解這種工作。圖像的邊界基本上像「填充」一樣，因爲它通常比正常厚。你可能以爲只是有邊界的厚爲你切頂在這種情況下，你的代碼可能是這樣的：

border-image: url("//i.imgur.com/hg2Thfa.png") 20 0 0 0 stretch;

這意味着你的div的頂部邊框，將使用圖像的頂部20像素您正在使用，並且圖像的其餘部分將僅用於div的內容區域。無論哪種方式，你想要的效果都可以通過邊框圖像來實現。

它是最好的方式/唯一的方式嗎？可能不會，但它是一種方式。

這裏是小提琴：http://jsfiddle.net/FCXGu/3/

我增加了一個內容區域只是爲了說明這裏的一切都是在這一個：http://jsfiddle.net/FCXGu/4/

沒有看到你的確切圖像，網頁和使用我不能告訴你創建png的最好方法，使用stretch vs repeat，等等。但是border-image非常靈活。但它在所有瀏覽器中都不起作用。只是好的。

來源

2013-02-24 19:48:29 Leeish

是的沒有幫助。我會告訴你我想得到什麼樣的效果（編輯） – 2013-02-24 20:45:46

啊。我懂了。那麼不，你想要的效果不能用PNG來實現。如果不知道確切的應用程序，很難說清楚，但CSS3'border-image'可能會做你想做的事。 – Leeish 2013-02-24 22:47:17

嗨。您可以在編輯問題時看到我想要做的事情（帶照片的圖片4）。 – 2013-02-25 17:37:56

覆蓋背景顏色

回答

相關問題