Learning and understanding the myth about the webDeveloping is the way to upgrade the skills in the web and as we use our tech skills to improve and let others to understand how the things are organized in a way can help who has not explored yet.
Today we'll be learning about CSS property which will help us with ease. We might have heard the therm but haven't used yet. 'Background-Clip-text, which can be very useful with the text, we use text-shadow often but using the background-clip can make text even more beautiful. For chrome users instead of using background-clip use -webkit-background-clip and play through the text.
Code:
Adding Image to background over Text
<style>
h1{
background-image:url('https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg');
-webkit-background-clip: text;
color:transparent;
padding:10px;
}
</style>
<h1>
Learning and sharing knowledge is the best thing in the world
</h1>
As this is my first article if found any mistake please help me to improve it. I hope you found this article useful.
Top comments (4)
Hey, good first one. I suggest a image preview so trades can see it in action quickly.
Actually, i have posted an image but i think everyone get confused about the image before the headline you can see some text written gradient in color is the actual image reflection of code that i have mentioned, thank you for your suggestion i'll keep the things in right order.
Yepp or a codepen would've been even better.
yes even that can work beautifully , this is just for the ease that no one should open the link and start walking through instead they can take it and play through their environment. Though appreciated your suggestion, Thank you.