Image as text background looks really awesome right? However doing this doesn't really work
.text{
background-image: url("./img/img.jpg");
}
But we can achieve our desired effect by adding just two more lines of code
.text{
background-image: url("./img/img.jpg");
color: transparent;
background-clip: text;
}
To ensure better reliability we can use some browser prefixes. eg
.text{
background-image: url("./img/img.jpg");
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
Top comments (0)