覆盖图像的灰度文本

Question

我正在尝试创建类似于此的布局：

我知道我可以创建＆＃34; A＆＃34;使用svg或clip-path但问题是我想将背景保留在＆＃34; A＆＃34;与身体背景对齐，即如果窗口调整大小，背景图像将作为封面反应而作出反应，因此＃＆; 34＆＃34;内部的图像应该反应。

我已经没有想法如何实现这一点......我能想到的最后一件事是使用background-attachment: fixed并创建＆＃34; A＆＃34;使用复杂的CSS，如许多不同宽度/高度的div，边界半径，翻译等来创建字母＆＃34; A＆＃34;。

编辑： 我想我没有说清楚这个案例，所以请查看我想要实现的 Demo 。 请注意当您调整浏览器大小时灰度点如何与文本div保持对齐，而背景图像设置为覆盖宽度和高度，而不管视图端口的大小和宽度如何。斑点内的图像会变化以呈现相同的斑点...我只想拥有更复杂的形状，如A或Z而不是那个奇怪的形状。

Answer 1

这是一种方法，您可以使用SVG响应性地为您写信。

重点是使用图像两次，一次是灰度，另一次是正常。然后，您可以使用文本（与此codepen中相同的方法）掩盖正常图像，以使灰度图像出现。这是一个例子：

svg {
  display: block;
  width: 100%; height: auto;
}

<svg viewbox="0 0 300 200">
  <defs>
    <mask id="textMask" x="0" y="0" width="300" height="200">
      <rect x="0" y="0" width="300" height="200" fill="#fff" />
      <text text-anchor="middle" x="100" y="150" dy="1" font-size="150">A</text>
    </mask>
    <filter id="deSaturate">
      <feColorMatrix in="SourceGraphic" type="saturate" values="0" />
    </filter>
    <image id="image" xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" width="300" height="200" />
  </defs>
  <use xlink:href="#image" filter="url(#deSaturate)" />
  <use xlink:href="#image" mask="url(#textMask)" />
</svg>

Answer 2

您可以使用clip-path并指向SVG <clipPath>。适用于everything except IE。

＆＃13;

＆＃13;

.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background: url("http://lorempixel.com/1000/700") no-repeat center center;
  background-attachment: fixed;
  
  -webkit-background-size: cover;
  background-size: cover;
}

.txt {
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  color: #fff;
  max-width: 500px;
  padding-top: 20px;
  margin: 50px auto;
  position: relative;
}

.a{
  position: absolute;
  left: -100px;
  top: 0;
  width: 100px;
  height: 100px;
  clip-path: url(#tri);
  -webkit-clip-path: url(#tri);

  background: url("http://lorempixel.com/1000/700") no-repeat center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  background-size: cover;
  
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

＆＃13;

<div class="wrap">
  <div class="txt">
    <div class="a"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ipsum, distinctio molestiae iste ab eum tempore excepturi fugit placeat veniam. Hic minus dolorum, reprehenderit atque, nobis rerum. Quis incidunt, beatae!
  </div>
</div>

<svg width="0" height="0">
  <clipPath id="tri" clipPathUnits="objectBoundingBox">
    <path d="M 0.5,0 L 1,1, 0,1 Z
             M 0.5,0.3 L 0.3,0.7 L 0.7,0.7 Z"/>
  </clipPath>
</svg>

＆＃13;

＆＃13;

＆＃13;

Demo fiddle

Answer 3

filter属性之类的东西怎么样？快速演示如下：

.background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(http://lorempixel.com/600/400);
}
.background:before {
  content: "A";
  color:white;
  position: absolute;
  font-size: 300px;
  top: 50%;
  left: 50%;
  opacity: 0.4;
  transform: translate(-50%, -50%);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

<div class="background">

</div>