Can I change the color of the part of the text that is in the different background?

user_14265147 0
Viewed 75

I would like to do this https://imgur.com/a/8QFD0l1 I want to change text from white to black color if it doesn't have the yellow background/img background. I tried to use mix-blend-mode and filter:invert() but it wasn't working for me.

Thanks for your help!

There is my current html/css.

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

css html
3 Answers

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>

user_24420990

You can use the span tag to divide and style your tag as you wish.

I have added them right on the letter of where your background color changes (on my screen to your code below so you may have to adjust it on yours.

(keep in mind that if your screen size changes/different device you'll have to adjust it using media queries)

HTML:

    <h1>Headline</h1>
  <p><span>Lorem ipsum dolor sit amet consectetu</span>r adipisicing elit. 
        Mollitia saepe reprehenderit nihil quam facere odio 
        <span>eveniet modi in earum impedit non id,</span> est vero. Non 
        culpa reprehenderit magni?
    </p>
    <p><span>Lorem ipsum dolor sit amet consectetu</span>r adipisicing elit. 
        Alias, unde. Porro sunt neque ullam atque? Ipsam <span>nesciunt 
        animi architecto! Consequatur</span> maxime dolorum eius placeat 
        animi.

CSS:

    h1 {
  font-size: 5rem;
  color: white;
}

p {
  font-size: 2.25rem;
}

p span {
  color: white;
}
user_142958960

You need to use an HTML tag to control that part in Css. And give it a class or id to make up.

<p>Some text here for you and <span class="dif-bg">I want to help</span> you.</p>

You css should be like this :

.dif-bf{ background-color:black;}

It can help you to solve that.

user_124617050
Related