Inserindo imagens no fundo de textos em ebooks
No CSS
.back_img {
background: url("../Images/Background.png") 0 0 no-repeat;
background-size: contain;
height: 200px;
text-align: center;
font-size: 1.2em;
padding: 1.5em 2em;
}No HTML
<div class="back_img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
<p>Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc.</p>
</div>
Mobileread: combining text and image
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 533 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="800" width="533" xlink:href="../Images/bamboo_fence.jpg"></image>
<text fill="red" style="font-size: 50px" text-anchor="middle" x="266.5" y="200">
This Here
<tspan x="266.5" y="280">Is A</tspan>
<tspan x="266.5" y="370">Chapter Title</tspan>
</text>
<image height="63" width="63" x="235" xlink:href="../Images/ornament.png" y="450"></image>
<text fill="green" style="font-size: 30px; font-style: italic" text-anchor="middle" x="266.5" y="600">By Author</text>
</svg>
</div>
</body>
Mobileread: Background image with text on top
Mobileread: Background image with text on top 2
Texto personalizável
Texto fixo
Poste um comentário