Nothing in the png #7
Description
Versions
$ node-html-to-image-cli --version
1.1.0
macOS: v11.6
Apple M1 chip
HTML
I have the following index.html.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");
html {
position: relative;
height: 100%;
}
body {
padding:0;
margin:0;
font-family: "Luckiest Guy";
}
.center{
display: flex;
justify-content: center;
align-items: center;
height:1080px;
}
h1 {
font-size: 240px;
background-image: url(/Users/shinichiokada/Bash_Projects/Cliptext/cliptext/flower.jpg);
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
padding: 0 50px;
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">It's Friday!</h1>
</body>
</html>
Terminal
Running node-html-to-image:
$ npx node-html-to-image-cli ./index.html test2.png
▶ start node-html-to-image-cli v1.1.0
✔ success Image successfully created!
Results
When I open the index.html, it renders what I want.
But the image created has nothing in it.
Cause
I think the CSS color:transparent; breaks it. It prints text without it but it is not what I want.