PNG图像的颜色叠加

时间:2015-08-05 09:28:25

标签: css png overlay

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

我解决了第一部分为屋顶着色但是当我添加第二层,墙壁时它变得复杂(不可能?)。 ' roof.png'在'以上' ' walls.png'而且颜色效果不明显。

我想要实现的是像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和图像的组合,但没有一些指导方针,我从此处无处可去......提前谢谢你!

1 个答案:

答案 0 :(得分:0)

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