1

Is is possible to do that in code, for dynamic content purpose? My only fallback is to use an image, but it will not be dynamic.

As you can see, the word "LARIVIÈRE" clip white background to reveal image.

enter image description here

I found background-clip property but it work with image set in background of text area, it's not really what I need in this case.

Thank you beforehand.

Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
Nubee
  • 11
  • 1
  • Possible duplicate of [Transparent text cut out of background](http://stackoverflow.com/questions/13932946/transparent-text-cut-out-of-background) – Daniel Higueras Feb 02 '16 at 19:45

2 Answers2

1

Here is SVG approach

@import url(https://fonts.googleapis.com/css?family=Lato:700italic);

body {
  background: url('http://www.onpointpreparedness.net/wp-content/uploads/2015/01/45202-black-wood.jpg');
  background-size: cover;
  font-family: 'Lato', sans-serif;
  background-repeat: no-repeat;
  height: 100vh;
  margin: 0;
  padding: 0;
}

text {
   font-size: 70px;
}

div {
  position: absolute;
  bottom: 5%;
  left: 0;
  width: 100%;
  text-align: center;
}

span {
  font-size: 85px;
  color: white;
  letter-spacing: 30px;
  vertical-align: bottom;
  line-height: 0.9;
  padding-left: 30px;
}
<div>
  <span>LOREM</span>
  <svg width="400px" height="70px">
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
      <text x='10' y="65" textLength='350'>LAVIRIERE</text>
    </mask>
    <rect fill="white" x="5" y="5" width="100%" height="100%" mask="url(#mask)"/>    
  </svg>
</div>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
0

In my opinion it would be best to overlay the word as a transparent image and position it over your background image.

EricBellDesigns
  • 955
  • 1
  • 9
  • 33