有没有一种简单的方法可以使用CSS在图像上对比文本？

Question

我正在尝试通过以下代码创建这种效果：

现在，我将文本复制到顶部，“遮盖”它，并将其设置为白色，但是它变得非常复杂，难以始终如一地控制/定位。我想知道是否有一种简单的方法可以使用单个文本元素和CSS（mix-blend-mode，filter等）

我在CSS技巧中看到了这一点，但这并不是我想要的。我需要图像上的文本完全为白色，而外面的文本为不同的颜色。 https://css-tricks.com/methods-contrasting-text-backgrounds/

我的codepen：https://codepen.io/aalokt89/pen/eamrJM

HTML：

<div class="container">
    <div class="image-block">
        <div class="intro-heading">
            <h1 class="intro-heading">Professional Makeup Artist & Hair Stylist</h1>
        </div>
    </div>
</div>

CSS：

.container {
  display: grid;
  grid-template-columns: repeat(4, 100px) 400px;
  grid-template-rows: repeat(4, 100px)
}

.image-block {
  grid-column: 1 / 5;
  grid-row: 1 / 5;
  background: url('https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80')100%/ cover;
}

.intro-heading {
  background: inherit;
  height: inherit;
  width: 600px;
  -webkit-background-clip: text;
  background-clip: text;
  filter: invert(1) grayscale(1) contrast(9);
  color: transparent;

  /*   grid-column: 2 / 6;
  grid-row: 1 / 5; */
  display: flex;
  align-items: center;
}

Answer 1

对于这种特殊情况，由于图像的宽度是固定的，因此可以考虑为文本使用简单的渐变色：

.container {
  display: grid;
  grid-template-columns: repeat(4, 100px) 400px;
  grid-template-rows: repeat(4, 100px)
}

.image-block {
  grid-column: 1 / 5;
  grid-row: 1 / 5;
  background: url('https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80')100%/ cover;
}

.intro-heading {
   background: linear-gradient(to right,#fff 400px,#000 0);
  width: 600px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: flex;
  align-items: center;
}

<div class="container">
    <div class="image-block">
        <div class="intro-heading">
            <h1 class="intro-heading">Professional Makeup Artist & Hair Stylist</h1>
        </div>
    </div>
</div>

类似的问题：

Change text color to white on any non-white background

Text blended over background color

Change text color black to white on overlap of bg