• Image en fond de texte

    En revenant sur un code, je m'aperçois qu'il n'est pas accepté sans préfixe, par les navigateurs: background-clip : text; pour FF et -webkit-background-clip : text; pour Chrome, Opera... ce dernier navigateur, que j'utilise peu, semble bien lent à charger l'image panoramique.

    Cependant, en revenant sur ce code, il semble que Firefox lise le code en webkit;  background-clip:text; est-il vraiment nécessaire ? Je vais le supprimer et vous me direz si ça fonctionne, chez vous, avec différents navigateurs.

    Ce code CSS vous permet de remplir un texte avec une image, texture animée ou non ou autre.

    Joyeux Noël !

    <p id="bkc">Joyeux Noël !</p>
    <style><!--
    #bkc{text-align:center; font-size:3vw; color:transparent; background:url('http://ekladata.com/6RSWOjHP72iEUHutR4ApjlyHOAo.gif'); -webkit-background-clip : text;}

    --></style>


    Pour ajouter une bordure au texte: -webkit-text-stroke:0.2vh black;

    Joyeux Noël !

    <p id="bkd">Joyeux No&euml;l !</p>
    <style><!--
    #bkd{text-align:center; font-size:8vw; color:transparent; background:url('http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif'); -webkit-background-clip : text; -webkit-text-stroke:0.2vh black; }

    --></style>


    On peut ajouter une animation au survol ou même une animation automatique (pas d'exemple ici).

    Joyeux Noël !

    <p id="bke">Joyeux No&euml;l !</p>
    <style><!--
    #bke{width:65vw; margin:2vh auto;text-align:center; font-size:8vw; color:transparent; background:url('http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif'); background-clip : text; -webkit-background-clip : text; -webkit-text-stroke:0.4vh black; transition:all 1s linear;}
    #bke:hover{background:url('http://ekladata.com/G_std2CdZVrQJZVayo5S-uhjCjo/anime-270.gif');background-clip : text; -webkit-background-clip : text; -webkit-text-stroke:0.4vh black;}
    --></style>


    A la place de textures, on peut placer une image: la difficulté est d'avoir un texte assez grand pour bien voir l'image.

    Joyeux
    Noël !

    <p id="bkg">Joyeux <br>No&euml;l !</p>
    <style><!--
    #bkg{width:65vw; margin:2vh auto;text-align:center; font-size:14vw; color:transparent; background:url('http://ekladata.com/rDmmHvlVpG9N7MXb_uz8Mo25ZJc.jpg'); -webkit-background-clip : text; -webkit-text-stroke:0.2vh black; background-position:50% 50%;}

    --></style>