"Transperent Text Examples"
Bootstrap 4.1.1 Snippet by chanagond

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: