Question

我已经谷歌了几天，想知道是否可以覆盖多个图像（例如roof.png，walls.png），然后动态地将叠加颜色应用于它们（取决于在用户点击颜色上）。

我解决了第一部分为屋顶着色但是当我添加第二层，墙壁时它变得复杂（不可能？）。＆＃39; roof.png＆＃39;在＆＃39;以上＆＃39; ＆＃39; walls.png＆＃39;而且颜色效果不明显。

我想要实现的是像here这样的着色方案，但不是所有颜色的单独图像（即roof_blue.png，roof_red.png），而是透明roof.png的css规则。任何建议都受到高度赞赏。

已编辑：

我会尝试更具体，以便您可以专注于解决方案（如果有...）这是我的HTML部分：

<div class="row">
    <div class="col-lg-12">
        <div class="visualisation_area">

        </div>
        <div class="buttons_area">
        </div>
    </div>
</div>

这是CSS：

.visualisation_area {
    width: 100%;
    height: 600px;
    background-image:   linear-gradient(to right, rgba(0, 0, 255, 0.5),  rgba(0, 0, 255, 0.5)),
                        url(../images/roof_blank.png),
                        linear-gradient(to right, rgba(255, 0, 0, 0.5),  rgba(255, 0, 0, 0.5)),
                        url(../images/walls_blank.png);

    background-repeat:  no-repeat,
                        no-repeat,
                        no-repeat,
                        no-repeat;

    background-position:    right,
                            center,
                            right,
                            center;
}

结果可见HERE 我很好奇的是，如果有办法应用蓝色＆＃39;蓝色＆＃39;和＆＃39; red＆＃39;渐变分别与roof_blank.png和walls_blank.png分开，因此颜色不会混合，但屋顶会变蓝，墙壁会变红吗？我已经尝试了几种与div和图像的组合，但没有一些指导方针，我从此处无处可去......提前谢谢你！

Answer 1

您可以使用CCS Sprites代替多个文件
您可以尝试创建divs with complex shapes

PNG图像的颜色叠加

1 个答案: