Comment obtenir un motif dans un texte écrit via CSS?

Il y a quelques jours, j'ai vu un site Web dans lequel un texte écrit avait une image d'arrière-plan.Comment obtenir un motif dans un texte écrit via CSS?

Est-il déjà possible avec CSS d'obtenir une image de fond dans un texte?

Je ne veux pas d'arrière-plan derrière le texte. Je n'ai aucune idée d'y parvenir. :(

Merci Gago!

http://img221.imageshack.us/img221/232/examplewf.png

Source

2011-07-15 gago

get une image de fond dans un texte? Que voulez-vous dire? – Raptor

Je pense qu'il veut que le texte contourne (probablement l'un ou l'autre côté) de l'image, plutôt que de l'avoir comme image de fond et que le texte passe par-dessus. –

Il pourrait aussi s'agir d'une police personnalisée. – Michas

-1

L'exemple image que vous avez pu être obtenus avec une police qui a un tel modèle en elle. Pour cela, vous devez utiliser @font css -face ou d'une autre façon d'utiliser des polices personnalisées.

en dehors de cela, je dirais que votre seule option est de faire l'image d'un texte avec un arrière-plan/style spécifique.

Source

2011-07-15 10:04:40 Joonas

@gago; vous pouvez utiliser css3 background clip proprty.

par exemple css:

p { 
    color: white; 
    background: url(images/fire.jpg) no-repeat; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

vérifier ce lien pour plus http://css-tricks.com/7850-image-under-text/

Source

2011-07-15 10:16:17 sandeep

Je voudrais encore me retenir de cela en raison du mauvais support du navigateur. Non seulement cela, mais si je me souviens bien, cela échoue horriblement dans IE9. – Joonas

vous devez expliquer qu'il est dans votre question au moins quel navigateur vous voulez soutenir. Cette propriété est prise en charge par les navigateurs moz et webkit. – sandeep

Quand ce n'est pas spécifié, je suppose que le soutien croisé de navigateur est recherché parce qu'il a juste du sens. Et sinon ... alors il le mentionnerait. Et je ne suis pas l'OP. – Joonas

-webkit-background-clip fait le travail

HTML

<header> 
     <h3><span>B</span><span>Brainz:: An Amazing Touch</span></h3> 
    </header>

CSS

header span:first-child 
    { 
    font-size: 7em; 
    color: white; 
    background: url("strip.png") repeat center center; 
    background-size: 6px 6px; 
     background-clip: content-box; 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
    }

View result

Cette méthode est prise en charge par webkit navigateurs qui signifie que vous devez définir une propriété color et background-clip comme boîte de contenu Incase il échoue dans un non-webkit navigateur

Source

2015-12-16 17:32:02

Comment obtenir un motif dans un texte écrit via CSS?

Répondre

Questions connexes