Inserindo imagens no fundo de textos em ebooks

@epistarse | agosto 26, 2016 Deixe seu comentário


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
Postagem mais recente Postagem mais antiga Página inicial

0 comentários: