• Fond texte image

    Un code qui, dans cette écriture, ne fonctionne qu'avec les navigateurs webkit (Chrome,Opéra, Safari...); pour Firefox, il faut adopter une autre écriture.
    Comment mettre une image, animée ou non, en fond de texte; ce texte sera assez gros, pour que l'effet soit bien visible.

     

    FALL


    FALL


    FALL


    Code du premier montage; les autres ont juste l'adresse de l'image différente; pour le troisième, avec texture, modifier background-repeat:repeat; et background-size:auto;
    <div id="mont">
    <h3>FALL</h3>
    </div>
    <style type="text/css"><!--
    #mont{
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    font-size: 250px;
    line-height: 250px;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px rgba(0,0,0,0.5);
    font-family: 'Gravitas One', 'Arial Narrow', Arial, sans-serif;
    background-image: url(http://ekladata.com/gNTQrOPjyyMBxSUgQADO7TdfQPA/DSCN6127.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    -webkit-background-clip: text;
    -webkit-filter:drop-shadow(10px 10px 10px black);}
    --></style>
    ...