封面图像上的灰度文本

Question

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

我知道我可以使用 svg 或 clip-path 创建 "A" 但问题是我想让 "A" 内的背景与正文背景对齐，即如果 window 调整背景图像的大小将像封面一样做出反应，"A".

中的图像也应该如此

我运行不知道如何完成这个...我能想到的最后一件事是使用 background-attachment: fixed 并使用复杂的 [= 创建 "A" 31=] 就像很多 div 一样，具有不同的 width/height、边框半径、翻译等来创建字母 "A".

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

Answer 1

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

Answer 2

您可以使用以下方法使用 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 3

您可以使用 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

封面图像上的灰度文本

Grayscaled text over cover image

html

css

svg

css-shapes