html - 叠加图片不影响透明

Question

我想使用 css 为图像着色，但不影响其透明部分。

例如:如果我在具有透明背景的图像中有一个棕色的小方 block ，我只想将这个方 block 变成另一种颜色。

我找到了这个指南 (http://css-tricks.com/forums/discussion/10828/color-overlay-img/p1)，但它也会影响透明部分。

提前致谢

Answer 1

你可以做的是放置一个 <div>在您要着色的尺寸的图像下方。这就是我要做的:

<div class="image">

    <div class="colour"></div>
    <img src="[..].png" alt="Some image" />

</div>

然后是 CSS:

.image{
    width: 100px; /* The image width */
    height: 100px; /* The image height */

    position: relative;
}

.image .colour{
    width: 30px; /* Width of the part you want to colour */
    height: 30px; /* Height of the part you want to colour */

    position: absolute;
    top: 35px; /* Y coordinate */
    left: 35px; /* X coordinate */
}

.image img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Place above the coloured part */
}