更改与图像重叠的文本的颜色

Question

我想要实现的外观是，如果您在白页上有黑色文本，但该文本会进入图像。图像上方的文本部分会更改其颜色。

我这里有一个 'working'（不灵活）示例，使用 data 属性获取相同的文本并使用 content 将其设置在 :before 元素上：

/* General Shit */

body {
  color: #000;
  font-family: Arial;
  font-size: 1.2rem;
  line-height: 1.5;
}

h2 {
  font-size: 3.6rem;
  margin-bottom: 30px;
}

p {
  margin-bottom: 30px;
}

.btn {
  background: #000;
  color: #fff;
  display: inline-block;
  font-size: 1.2rem;
  padding: 15px 60px;
}

img {
  width: 100%;
  max-width: 100%;
}


/* Grid */

.grid {
  clear: both;
  margin: 0 auto;
  padding: 30px 0;
  max-width: 1000px;
}

.grid__item {
  box-sizing: border-box;
  float: left;
}

.grid--flip .grid__item {
  float: right;
}

.grid__item--caption {
  padding: 30px 60px;
}

.one-half {
  width: 50%;
}


/* Title */

.title-wrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  margin-left: -60%;
  overflow: hidden;
  position: relative;
}

.grid--flip .title-wrap {
  -webkit-box-pack: end;
  justify-content: flex-end;
  margin-left: 0;
  margin-right: -60%;
}

.title {
  color: #000;
}

.grid--flip .title {
  color: #fff;
}

.title:before {
  color: #fff;
  content: attr(data-title);
  display: block;
  overflow: hidden;
  position: absolute;
  width: 27.75%;
  white-space: nowrap;
}

.grid--flip .title:before {
  color: #000;
  width: 34.75%;
}

<div class="grid">
  <div class="grid__item grid__item--image one-half">
    <img src="http://www.fillmurray.com/800/800" />
  </div>
  <div class="grid__item grid__item--caption one-half">
    <div class="title-wrap">
      <h2 class="title" data-title="Title goes here">Title goes here</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="#" class="btn">Shop Collection</a>
  </div>
</div>

<div class="grid grid--flip">
  <div class="grid__item grid__item--image one-half">
    <img src="http://www.fillmurray.com/800/800" />
  </div>
  <div class="grid__item grid__item--caption one-half">
    <div class="title-wrap">
      <h2 class="title" data-title="Title goes here">Title goes here</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="#" class="btn">Shop Collection</a>
  </div>
</div>

问题是如果...

我调整了容器的宽度，所有的值都关闭了，看起来很破损。
标题较长且换行，由于溢出而被截断
以及为什么宽度是 :before 元素上的宽度（如果有人能解释那就太好了哈）

所以我尝试了一个使用 px 值而不是 % 的版本，它修复了更改容器宽度的问题。但是，当文本换行到 2 行时，我仍然遇到它表现不正确的问题。

示例（使用 px）：https://codepen.io/moy/pen/JjXoMvb

谁能想到更好的解决方案？我是不是太复杂了还是遗漏了一些明显的东西？

编辑：PX 示例错误不正确，现已更新link。

Answer 1

使用CSS clip-path property

例子

:root {
  --size: 100px;
}

.resizable {
  border: 2px solid black;
  width: calc(var(--size) * 3);
  height: calc(var(--size) * 2);
  resize: both;
  overflow: auto;
}

.container {
  position: relative;
}

.divider {
  height: 100px;
}

.title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}

img {
  width: var(--size);
  height: var(--size);
}

.left {
  color: blue;
  clip-path: polygon(0 0, var(--size) 0, var(--size) var(--size), 0 var(--size));
}

.right {
  color: red;
  clip-path: polygon(var(--size) 0, 100% 0, 100% 100%, 0 100%, 0 var(--size), var(--size) var(--size));
}

.container-reverse img {
  float: right;
}

.container-reverse .left {
  clip-path: polygon(100% 0, 100% var(--size), calc(100% - var(--size)) var(--size), calc(100% - var(--size)) 0);
}

.container-reverse .right {
  clip-path: polygon(0 0, calc(100% - var(--size)) 0, calc(100% - var(--size)) var(--size), 100% var(--size), 100% 100%, 0 100%);
}

.container-reverse h1 {
  text-align: right;
}

<div class="resizable">
  <div class="container">
    <h1 class="title left">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
    <h1 class="title right">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
    <img src="http://placehold.it/100x100" />
  </div>
  <div class="divider"></div>
  <div class="container container-reverse">
    <h1 class="title left">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
    <h1 class="title right">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
    <img src="http://placehold.it/100x100" />
  </div>
</div>

更改与图像重叠的文本的颜色

Change the colour of text that overlaps an image

html

css

flexbox

crop