<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="text-center"> <center> <h1>Transperent Text Examples</h1> <div id="banner" class="col-lg-12"> <h1 class=""><span class="hello">This is,</span> <span class="small">Example of</span> <span>Transperent Text</span></h1> </div> </center> </div> </div><!---end of container---> </body> </html>

#banner h1 { font-size: 100px; text-align: center; background: url('https://ik.imagekit.io/demo/img/responsive_images_srcset_sizes_assets/big/1.jpeg') fixed; -webkit-text-fill-color: transparent; text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; display: block; line-height: 140%; font-weight: 900; text-transform: uppercase; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; letter-spacing: 20px; }