How to create knockout text with a non black/white background?

user_8742576 0
Viewed 53

I am trying to create knockout text like the codepen below, this codepen works just fine when the background colour is set to pure white, or pure black, but as soon you change

background: #ffff;

to, for example,

background: #f5f;

The background image leaks through for some reason, like so: enter image description here How do I do this whilst using any colour, without the background image bleeding through?

Snippet Example (taken from https://codepen.io/rebelchris/pen/WNxQmpd ):

* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.background {
  background: url("https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1957&q=80")
    center;
  background-size: cover;
}
h1 {
  font-size: 15vw;
  font-weight: bold;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  mix-blend-mode: lighten;
  color: #000;
  background: #fff;
}
<div class="background">
  <h1>GALAXY</h1>
</div>

css html
1 Answers

I have done something similar and used the css background-clip property

the background is associated with the h1 element rather than the body

you wouldnt need the .background class in your example above

h1 {
  font-size: 15vw;
  font-weight: bold;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  background: url("https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1957&q=80") center;
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Snippet example:

* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #F5F;
}
h1 {
  font-size: 15vw;
  font-weight: bold;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  background: url("https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1957&q=80") center;
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<div>
  <h1>GALAXY</h1>
</div>

user_39289440
Related