• Fond texte

    L'écriture d'un tel code s'est simplifié et généralisé: background-clip: text; plus besoin des préfixes par navigateur (à vérifier tout de même pour certains).

    Nous savons colorer nos textes mais pour les titres, en assez grands caractères, nous pouvons remplacer la couleur par une texture ou une image.

    Placer une image en fond de texte.

    Placer une texture en fond de texte.


    <p id="rose">Placer une image en fond de texte.</p>
    <p id="text">Placer une texture en fond de texte.</p>

    <style><!--

    @import url('https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap');
    #rose{width: 60vw; height: 15vw; margin:1vh auto; border:0.1vh solid black; font-size:5vw;
    background: url('http://ekladata.com/73RnRfQ97_sf7amVFFLKfiHOXsY@1152x648.jpg');background-size:60vw 33.75vw;
    background-clip: text; background-position:0vw -4vw;
    color: transparent;}
    #text{width: 60vw; height: 15vw; margin:1vh auto; border:0.1vh solid black; font-size:5vw;
    background: url('http://ekladata.com/GL3f0MSemCcwU-xBewze75ylETQ/rainb2@1152x648.jpg');background-size:70vw 15vw;
    background-clip: text; background-position:-5vw 0vw;  font-family: 'Kaushan Script', cursive; 
    color: transparent;}
    --></style>


    J'ai placé une bordure sur le paragraphe mais c'est facultatif.

    J'ai défini la taille de l'image de fond: background-size:60vw 33.75vw; pour qu'elle ne soit pas déformée.

    J'ai défini la position de cette image de fond: background-position:0vw 0vw; pour pouvoir choisir la partie la plus colorée.

    Nous pouvons choisir la famille de police: par exemple, une police de Google.

    Par contre, je ne sais pas placer une bordure à ces textes, par text-shadow !