html - 有没有一种简单的方法可以使用 css 来对比图像上的文本？

Question

我正在尝试通过代码创建此效果:

现在我正在复制顶部的文本，“屏蔽”它，并将其设置为白色，但它变得非常复杂并且难以一致地控制/定位。我想知道是否有一种简单的方法可以使用单个文本元素和 css(mix-blend-mode、过滤器等...)

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

我的代码笔: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