html - 封面图像上的灰度文本

Question

我正在尝试创建与此类似的布局:

我知道我可以使用 svg 或 clip-path 创建“A”，但问题是我想让“A”内的背景与主体背景对齐，即如果窗口调整大小，背景图像将作为封面有反应，“A”内的图像也应该有反应。

我对如何实现这一点已经没有想法了...我能想到的最后一件事是使用 background-attachment: fixed 并使用复杂的 CSS 创建“A”具有不同宽度/高度、边框半径、翻译等的 div 以创建字母“A”。

编辑:我想我没有说清楚所以请检查这个 Demo 我正在努力实现的目标。请注意，当您调整浏览器大小时，灰度点如何与文本 div 保持对齐，而背景图像设置为覆盖宽度和高度，而不管视口(viewport)大小如何，并且点内的图像会更改以呈现相同的点...我只想拥有更复杂的形状，例如 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>