Is there an easy way to contrast text over an image using css?

Question

I am trying to create this effect through code:

Right now I am duplicating the text on top,'masking' it, and setting it to white, but It's becoming pretty complex and hard to control/position consistently. I'm wondering if there's a simple way to do this with a single text element and css (mix-blend-mode, filter, etc...)

I saw this on css-tricks, but it's not exactly what I want. I need the text over the image to be completely white, and the text outside to be a different color. https://css-tricks.com/methods-contrasting-text-backgrounds/

My codepen: 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;
}

score 0 · Accepted Answer · answered May 06 '19 at 23:23

For this particular case and since the width of the image is fixed, you can consider a simple gradient coloration for the text:

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

Is there an easy way to contrast text over an image using css?

1 Answers1

Linked

Related