can i change the color of the part of the text that is in the different background?

Question

mix-blend-mode might help here.

h1,
p {
  mix-blend-mode: color;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

h1 {
  font-size: 5rem;
}

p {
  font-size: 2.25rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <h1>Headline</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia saepe reprehenderit nihil quam facere odio eveniet modi in earum impedit non id, est vero. Non culpa reprehenderit magni?
  </p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, unde. Porro sunt neque ullam atque? Ipsam nesciunt animi architecto! Consequatur maxime dolorum eius placeat animi.
  </p>
  <img src="https://svgshare.com/i/R7P.svg" alt="">
</body>

</html>

blending the image over the text and increasing contrast might also help but will modify the colors too.:

img {
filter:contrast(200%);
mix-blend-mode: luminosity;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  position: absolute;
  top: 0;
  left: 0;
}

h1 {
  font-size: 5rem;
}

p {
  font-size: 2.25rem;
}

<h1>Headline</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia saepe reprehenderit nihil quam facere odio eveniet modi in earum impedit non id, est vero. Non culpa reprehenderit magni?
  </p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, unde. Porro sunt neque ullam atque? Ipsam nesciunt animi architecto! Consequatur maxime dolorum eius placeat animi.
  </p>
  <img src="https://svgshare.com/i/R7P.svg" alt="">

background-clip can also be another approach using twice your svg shape (a white one as a background and a yellow one to show.

div {
  position: relative;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzM3IiBoZWlnaHQ9IjY5NCIgdmlld0JveD0iMCAwIDczNyA2OTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNNTU3LjUgMjI0LjVDNTg0IDQzMSAyMzYuNjAzIDcwOC43OCAtNzEgNjkzTC04Ny41IC0xOTguNUw3MzYuNSAtMjM5QzU4OS42MTcgLTE0LjQ3MjQgNTMxIDE4IDU1Ny41IDIyNC41WiIgZmlsbD0iI0ZGRiIvPg0KPC9zdmc+) 0 0 no-repeat black;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1 {
  font-size: 5rem;
}

p {
  font-size: 2.25rem;
}

div svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1
}

<div>
  <h1>Headline</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia saepe reprehenderit nihil quam facere odio eveniet modi in earum impedit non id, est vero. Non culpa reprehenderit magni?
  </p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, unde. Porro sunt neque ullam atque? Ipsam nesciunt animi architecto! Consequatur maxime dolorum eius placeat animi.
  </p>
  <svg width="737" height="694" viewBox="0 0 737 694" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M557.5 224.5C584 431 236.603 708.78 -71 693L-87.5 -198.5L736.5 -239C589.617 -14.4724 531 18 557.5 224.5Z" fill="#F5DC00"/>
</svg>

</div>

Leave a Comment Cancel Reply