[英]Overlaying image without affecting transparent
I want to color an image using css, but without affecting its transparent parts. 我想使用CSS为图像着色,但又不影响其透明部分。
For example: if I have little brown square in an image with transparent background, i want to turn ONLY the square into another color. 例如:如果我在具有透明背景的图像中没有棕色的正方形,我只想将正方形变成另一种颜色。
I've found this guide (http://css-tricks.com/forums/discussion/10828/color-overlay-img/p1) but it affects the transparent part as well. 我已经找到了本指南(http://css-tricks.com/forums/discussion/10828/color-overlay-img/p1),但它也会影响透明部分。
Thanks in advance 提前致谢
What you can do is place a <div>
under the image at the dimensions you want to colour. 您可以做的是在图像下方的要着色的尺寸处放置一个<div>
。 This is what I would do: 这是我会做:
<div class="image">
<div class="colour"></div>
<img src="[..].png" alt="Some image" />
</div>
And then the CSS: 然后是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 */
}
If the region is rectangular 如果区域是矩形
If the region is non-rectangular 如果区域是非矩形的
I don't believe there's a general-purpose way to do this with CSS alone (without touching the HTML, or using more than 1 image file, or using canvas or SVG, or using JS or jQuery). 我不相信有单独使用CSS的通用方法(无需触摸HTML或使用多个图像文件,画布或SVG或JS或jQuery)。 If it's not possible to touch the HTML source code, you could modify the HTML dynamically with JS or jQuery. 如果无法触摸HTML源代码,则可以使用JS或jQuery动态修改HTML。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.