Изменить цвет текста, перекрывающего изображение - PullRequest
Новая
       154

Изменить цвет текста, перекрывающего изображение

3 голосов
/ 07 августа 2020

Я пытаюсь добиться того, чтобы у вас был черный текст на белой странице, но этот текст переходит в изображение. Раздел текста, который находится над изображением, меняет свой цвет.

У меня есть «рабочий» (не гибкий) пример, использующий атрибут data, чтобы захватить тот же текст и установить его на :before элемент с использованием content:

https://codepen.io/moy/pen/rNeaGbJ

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

Проблема с этим, если ...

  1. Я регулирую ширину контейнера, все значения выключены и он выглядит сломанным.
  2. заголовок длиннее и переносится на несколько строк, он обрезается из-за переполнения
  3. И почему ширина такая же, как у элемента :before (если кто-нибудь мог бы объяснить, что было бы здорово, ха)

Итак, я попробовал версию, использующую значения px вместо %, которая устраняет проблемы с изменением ширины контейнера. Однако у меня все еще есть проблема с его неправильным поведением, когда текст переносится на 2 строки.

Пример (с использованием px): https://codepen.io/moy/pen/JjXoMvb

Может ли кто-нибудь придумать лучшее решение для этого? Я слишком усложняю это или упускаю что-то очевидное?

Изменить: пример PX неверен неверно, сейчас обновлена ​​ссылка.

1 Ответ

3 голосов
/ 07 августа 2020

Используйте свойство CSS clip-path

Пример 

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