Question

我正在尝试遮罩我的背景图像，但是使遮罩变亮而不是变暗。我正在尝试这种外观： https://elements-cover-images-0.imgix.net/cda178d5-3623-43be-8d74-1e76ad51bd5a?w=1170&fit=max&auto=compress%2Cformat&s=d2bfdaf9c43d63b844c304581a674e71

我的代码以该问题的第二个答案开始：Transparent text cut out of background

并尝试将其与以下项不匹配：Inverting SVG image mask

这是我的代码笔（它不应该滚动，但这是一个单独的问题）

    svg{width:100%;}
    body {
      background:url("https://farm8.staticflickr.com/7922/46443741054_56bb543445_c.jpg") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

</head>

<body>
  <svg viewbox="0 0 100 100">
    <defs>
      <filter id="invert">
        <feComponentTransfer>
          <feFuncR type="table" tableValues="1 0"/>
          <feFuncG type="table" tableValues="1 0"/>
          <feFuncB type="table" tableValues="1 0"/>
        </feComponentTransfer>
      </filter>
      <g id="text">
        <text text-anchor="middle" x="50" y="38" dy="1">Venture</text>
        <text text-anchor="middle" x="50" y="50" dy="1">Into the Wild</text>
      </g>
      <mask id="mask" x="0" y="0" width="100" height="100">
        <!-- <image width=1000 xlink:href="https://farm8.staticflickr.com/7922/46443741054_56bb543445_c.jpg" filter="url(#invert)"/> -->
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <use xlink:href="#text" />
      </mask>
    </defs>
    <rect x="0" y="0" width="100" height="100" mask="url(#mask)" fill-opacity="0.6"/>
    <use xlink:href="#text" mask="url(#mask)" />
  </svg>    </body> </html>

https://codepen.io/mckee80/pen/NoVMWP

任何帮助将不胜感激。我对svg不太了解，我只是想制作一个很酷的登录页面。

Answer 1

我已将您的图片移至SVG中。我不太确定这是您想要的。

该蒙版具有灰色矩形（＃555）和白色文本。

      <svg viewbox="0 0 100 100">
      <defs> 
        <mask id="test">
       <g id="text" fill="white">
        <rect width="100%" height="100%" fill="#555" />
        <text text-anchor="middle" x="50" y="38" dy="1">Venture</text>
        <text text-anchor="middle" x="50" y="50" dy="1">Into the Wild</text>
      </g>
        </mask>
        </defs>
        <image width="180%" xlink:href="https://farm8.staticflickr.com/7922/46443741054_56bb543445_c.jpg" style="mask: url(#test)" />
        
      </svg>

在背景图像上反转svg蒙版

1 个答案: