Question

我正在使用.PNG背景（建筑物的照片）和背景上的.SVG元素的着色应用程序。然后，这些.SVG路径在JavaScript代码的帮助下着色。我开始将.SVG层的不透明度设置为0.65

在这种情况下，.PNG背景在彩色.SVG后面可见，但颜色似乎已经被淘汰了＃39;因为降低了不透明度。有没有办法保持颜色的强度，即覆盖 .PNG背景上的彩色.SVG路径？

以下是HTML部分：

<div class="building_area_eave_1" id="building_area">
    <svg version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve" style="margin-top:9px; opacity:0.65;">
    <polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>

使用CSS：

#building_area {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-size:contain;
    background-position:center;
    position: relative;
}
.building_area_eave_1 {
    background: url("../images/1_part_eave_background.png") no-repeat;
}

Answer 1

嗨，你期待这样吗??? ???

＆＃13;

#building_area {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-size:contain;
    background-position:center;
    position: relative;
}
.building_area_eave_1 {
    background: url("http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg") no-repeat;
}
svg#full_x5F_wall_x5F_w_x5F_eave ~ #main_wall_1 {
    opacity: 0.65;
}

＆＃13;

<div class="building_area_eave_1" id="building_area">
    <svg version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve" style="margin-top:9px;">
    <polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>

＆＃13;

这是演示代码.. !!

<强> Demo code

Answer 2

您可以在svg中使用混合模式：

#dispo_array

以下是一个示例：

<filter id="f1" x="0" y="0" width="1" height="1">
      <feImage xlink:href="#p1" result="p1"/>
      <feImage xlink:href="#p2" result="p2"/>
      <feBlend mode="multiply" in="p1" in2="p2" />
</filter>

此处详细信息：https://css-tricks.com/basics-css-blend-modes/

Answer 3

好的，感谢@ ramtin-gh提供的link我设法解决了这个问题。将混合混合模式属性添加到SVG图层会使颜色显示乘以到背景图像。 HTML：

<div class="building_area_eave_1" id="building_area">
    <svg class="svg_overlay" version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve">
    <polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>

使用CSS样式：

#building_area {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-size:contain;
    background-position:center;
    position: relative;
}
.building_area_eave_1 {
    background: url("../images/1_part_eave_background.png") no-repeat;
}
.svg_overlay {
    margin-top:9px; 
    mix-blend-mode: multiply;
}

我不会在这里发布所有SVG图层以保持帖子简单。谢谢你的回复。希望这可以帮助有类似问题的人。

如何以较低的不透明度保持SVG颜色强度

3 个答案: