Photoshop Question posted in
The official user guide can be found here.

Transparent text allow background to show – Photoshop

I was wondering if it’s possible to achieve transparent text inside a container with a solid background color. The transparent text allows you to see the image behind the container.

Something like this

Transparent text

Found this with a google search. The image was created in photoshop. Can this effect be achieved with CSS? If so, how?

Just curious.

Tags:

2

Answers


  1. 0

    I hope this will be what you are looking for

    <!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) repeat;
            margin: 10px;
        }
        
        h1 {
            background-color: #fff;
            overflow: hidden;
            display: inline-block;
            padding: 10px;
            font-weight: bold;
            font-family: arial;
            font-size: 200px;
        }
        
        span {
            background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) -20px -20px repeat;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            display: block;
        }
        .Container {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="Container">
        <h1><span>LOS ANGELES</span></h1>
    </div>
</body>

</html>

    All you just want to do is setting -webkit-text-fill-color or color to transparent and -webkit-background-clip to text. Simple 🙂

    Login or Signup to reply.
  2. 0

    Another approach is by using clip-path and by using an SVG image as the mask – the SVG image itself can contain text. This has support in WebKit and Gecko but not IE ( http://caniuse.com/#feat=css-masks )

    https://css-tricks.com/clipping-masking-css/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search