封面图像上的灰度文本

Question

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

我知道我可以使用 svg 或剪辑路径创建“A”，但问题是我想保持“A”内的背景与主体背景对齐，即如果窗口调整大小，背景图像将作为封面会做出反应，“A”内的图像也应该如此。

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

编辑： 我想我没有把这个案子说清楚，所以请检查我想要实现的这个 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工作。

.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%);
}

<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>

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>