HTML / CSS填充和图像

Question

我有下面的图片 - 是否可以使用HTML / CSS填充颜色（例如：三角形中的部分）？

或者我可以使用HTML / CSS创建此形状然后填充它吗？

或者我是否必须使用彩色图像？

最好完全使用HTML / CSS或者至少填写图片..

THX

Answer 1

如果您离开要填充transparant的部分，则可以使用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>