HTML / CSS填充和圖像

Question

我有下面的圖像-是否可以使用HTML / CSS用一種顏色（例如：三角形中的部分）填充它？

還是可以使用HTML / CSS創建此形狀然后填充它？

或者我是否必須使用彩色圖像？

最好完全使用HTML / CSS或至少填充圖像。

謝謝

Answer 1

如果保留要填充透明的零件，則可以使用css用顏色填充它。 如果你想在不使用圖像的情況下創建三角形，你可以使用SVG但在某些版本的IE（8及更早版本）中不支持，或者你可以使用Raphael JS在幾乎所有的瀏覽器中繪制它。

Answer 2

HTML和CSS實際上不做任何事情，它們只是應如何呈現內容的標記。 所以不，你不能僅使用HTML和CSS編輯圖像，盡管可能使用JavaScript。

您可以使用HTML和CSS來顯示帶有alpha通道的圖像，並在包含該圖像的元素上設置背景色。 然后，背景顏色將顯示在圖像透明的位置。

Answer 3

你可以......確保你的png的三角形部分是透明的，其余部分是白色的...將你的圖像放在一個與你的pic相同的寬度和高度的div中，然后給這個div一個背景顏色。 瞧...除透明三角形外，一切都是白色的。

祝好運。

<div style="width:66px;height:30px;background-color:green;">
    <img src="yourimage" alt="" />
</div>