Search code examples
htmlcssclipping

Need help getting a background to show through some text in a more complex way than clipping offers

See the attached image for what I am trying to acheive.

Basically I need the background image to come through the text, except where the text overlaps off the faded panel. This needs the text to become the same colour/opactity as the panel itself.

This is giving me a headache but would like to see how far/what solutions could achieve my goal.

Thanks, Harry.

enter image description here

EDIT 1: Here's a codepen if you'd like to test anything https://codepen.io/itsharryfrancis/pen/XVagep

I've tried using this with it but it does

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

EDIT 2: I am going to leave a codepen here that is the latest version of what I have so far for anyone that may want to see it in the future.

https://codepen.io/itsharryfrancis/pen/goxVQP?editors=0100

Solution

  • Here is working example that implements required look, but it uses relatively new clip-path property that is not supported in IE and Edge. This issue can be resolved by using SVG clipping instead (or as fallback), but I hope that this is enough for the start.

    .example {
    width: 600px;
}

.example {
    background: url('http://dummy-images.com/nature/dummy-1024x576-Waterfalls.jpg');
    background-position: center center;
    background-size: cover;
    position: relative;
}

.text {
    width: 100%;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 100px;
    line-height: 1.0;
    text-transform: uppercase;
}

.part1, .part2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.part1:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 400px;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

.part1 .text {
    position: relative;
    z-index: 2;
    background: url('http://dummy-images.com/nature/dummy-1024x576-Waterfalls.jpg');
    background-position: center center;
    background-size: 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.part2 {
    color: rgba(255, 255, 255, 0.5);
    z-index: 3;
    clip-path: polygon(400px 0px, 100% 0px, 100% 100%, 400px 100%);
}
    <div class="example">
  <div class="part1"><span class="text">Stack<br>Overflow</span></div>
  <div class="part2"><span class="text">Stack<br>Overflow</span></div>
 </div>

    UPDATE: I've realized that initial version have misaligned background under text. Updated version fixes this issue, but at a small price: .text elements are required to have width: 100% as it allows to align backgrounds. It will cause a need to add some padding in a case if text should be additionally aligned.