html - 分层 CSS SVG 蒙版不起作用

Question

我正在做一个元素，我必须在一个 div 上应用 2 个 svg 蒙版。它们用于将大标题图像混合到右侧和左侧的背景中。

以下是我使用的 HTML 代码:

<div class="banner inner-slider">
    <ul class="bx-slider">
        <li class="mask" style="background-image: url('http://placehold.it/1440x610'); background-size: cover; background-position: center center;">
            <div class="slide clearfix bigWrapper">
                <div class="col-md-1"></div>
                <div class="col-md-6 text-left">
                    <h1>Sample Header</h1>
                    <p>This is some sample header text. Wee! Isn't this fun?</p>
                </div>
            </div>
        </li>
    </ul>
</div>

我的 CSS 如下:

.mask {
    -webkit-mask-image: url('../images/mask-right.png'),url('../images/mask-left.png');
    mask: url("../images/mask-right.svg"),url("../images/mask-left.svg");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: center;
}

当我有这个设置时，两个掩码都没有显示。如果我将它们分成单独的类(mask-left 和 mask-right)并将两者都分配给 div，我会显示一个或另一个，但不会同时显示。

如何让两个面具都显示出来？

Answer 1

我用这个 svg 来制作带有动画的很棒的蒙版图像

Check the output here

<style type="text/css">.myClass { fill: url(#image); backenter link description hereground-size:contain;}svg{display:block;margin:0 auto;}</style>

<svg id="layer_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px"
     height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
        <g id="Layer_2"><path id='triangle' class='myClass' fill="#151515" d="M38.668,249.994l-1.333,8.667c0,0-12.667,24.667-15,28S2.766,334.326,2.766,334.992
        S-1.667,350.326,16,353.326s28,2.333,28,2.333s6.333,32.999,5.333,34.999s1,9.334,16,14.667c0,0-3.667,9.665-2,12.665
        s13.333,12.999,18,13.333c0,0,8.667,3.334,3,8.667c0,0-14.333,32.664,13,45.997c0,0-7.333,9.998-16.333,11.665
        c0,0-17.667,7.666-16.667,27.666c0,0-4.333,69.336,5,85.336c0,0,12.666,23.671,10.333,35.671c0,0,7,18.332,8.333,25.666
        c0,0,2.667,30.671,6.667,37.671l9,42.337c0,0-17.667,31.669-19.667,40.002s155,0,155,0s-16.667-38.337-17.333-48.671
        S209,715.994,209,715.994s-16-58.668-5-76.334s20.667-15.669,38-38.669c0,0,16.667-18.006,19.667-18.006c0,0,9-11.67,10.333-22.003
        v-44.667c0,0,30.332,24.334,34,28.667c0,0-7,17.333-7.334,22c-0.332,4.667,3.335,7.333,4.668,7.333
        c1.332,0-0.741,12.334,4.129,18.334c4.869,6,5.203,3.333,5.203,3.333s-6.332,12.334,3,33.667c0,0,2.335,7.669-1,10.335
        c-3.334,2.666-2.334,17.334,2.334,23.334c0,0-10,26.338-11,36.338s-1.063,18.333,1.136,20s-7.47,15.675-6.802,19.008
        c0.666,3.333-6.334,15.334-6.667,20S285,792,285,792l327.159-0.096L612,365.5c0,0-46.5-20.5-83.5-28c0,0-53-15-64-22
        c0,0-25.5-27-27-33s20-30,0-73.5c0,0,1-28.5-7.5-37c0,0-1-49-25-82.5s-42-67.499-99-90.833L188.667,0c0,0-35,6.667-47.333,19.001
        c0,0-25.667,8.333-39,13c0,0-38.667,14.667-45.333,15c0,0-60,20.333-32,63c0,0,5.333,11.667,25.667,19c0,0-12,27.997-13.667,39.664
        s-9.333,42.333-9.333,44.333s1,17.996,2.333,19.329"/>
</svg> 


<svg>
    <defs>
        <pattern patternContentUnits="objectBoundingBox" id='image' width="3.4" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
            <image patternContentUnits="objectBoundingBox" xlink:href='img/loop.jpg' width="100" height="100" preserveAspectRatio="none">
                <animate attributeType="XML"
                    attributeName="x"
                    from="-60" to=".2"
                    dur="100s"
                    repeatCount="50"/>

            </image>
        </pattern>
    </defs>
</svg>

[This is how it looks][1]