Dire que j'ai le code suivant:Définir l'image de fond pour la couleur de police?
<span>Hello world!</span>
Et le CSS suivant:
span{
color:red;
}
Est-il possible que je peux changer la red à une image? Comme url(images/text-bg.png);? Je veux mettre une texture sur mon texte et j'ai décidé que je ferais simplement du texte une "image" de couleur, mais je ne suis pas sûr que cela puisse être fait avec CSS.
Oui, il est possible à l'aide svg, vous pouvez intégrer <svg> sur une <div> et de l'image de fond sur une autre <div>, appliquer plus tard z-index à <div>. Vous pouvez utiliser des applications Vector comme illustrator pour créer le svg comme vous le souhaitez.
<html>
<head>
<title>Untitled Document</title>
<style>
html
{
background-image:url('lauch.jpg');
background-repeat:no-repeat;
background-position:center;
padding-top:200px;
}
</style>
</head>
<body>
<div align="center">
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="140px" height="80px" viewBox="0 0 76.25 39.167" enable-background="new 0 0 76.25 39.167" xml:space="preserve">
<text transform="matrix(1 0 0 1 5.9336 30.417)" fill="none" stroke="red" stroke-width="0.25" stroke-miterlimit="10" font-family="'Tahoma'" font-size="36">Text</text>
</div>
</body>
</html>
Ceci n'est pas possible, même avec CSS3. Voici un article intéressant sur les effets de texte que vous pouvez utiliser avec CSS3.
http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects
Une autre option est d'utiliser une police personnalisée qui suites vos besoins.
Ce site a une quantité incroyable de polices open-source gratuites dans tous les formats nécessaires pour supporter tous les navigateurs, il vous donne même un bon fichier de démonstration pour montrer comment l'implémenter en CSS. Ceci est également compatible avec CSS2.1, ce qui le rend compatible IE7 +.
Il semble que j'obtienne le même effet avec l'exemple "zèbre" dans le lien que vous m'avez montré. – Charlie
Malheureusement, cet exemple n'appartient pas à cette liste.Ce n'est pas CSS3, il utilise simplement le remplacement d'image comme mentionné par @wex –
Oui, et l'arrière-plan doit être de la même couleur que le modèle. – Charlie
La technique de permutation des textes pour des images est commun pour les en-têtes et la navigation de page, mais il n'y a vraiment pas de techniques pures CSS compatibles cross-browser (this est une technique agréable, mais ISN 'T quelque chose que vous devriez compter dessus).
Si vous avez une quantité limitée de texte que vous voulez appliquer la texture, le mieux est de simplement remplacer le texte avec des images manuellement, en tant que tel:
HTML:
<h1 class="title">Title</h1>
CSS:
h1.title {
background: url(images/title.gif) 0 0 no-repeat;
width: 80px;
height: 23px;
text-indent: -10000px; }
Voici la chose, je veux être en mesure de changer le texte sans avoir à aller dans PS et refaire l'en-tête. – Charlie
True. Encore une fois, je ne recommande vraiment cette technique que si vous l'utilisez pour une "quantité finie de texte", et, comme vous l'avez dit, un texte qui peut être statique. – Wex
Bon, je me demande s'il y a d'autres moyens. – Charlie
Je suis en train de penser s'il y aurait une façon de le faire en utilisant l'opacité; mais je ne pense pas qu'il y en ait. https://developer.mozilla.org/en/CSS_Reference Regardez autour de vous les styles de texte et de police disponibles et voyez s'il y a quelque chose à essayer pour obtenir l'effet que vous recherchez sans utiliser d'image. – Dave
Vous pourriez être en mesure de le produire avec un peu de SVG ... – zzzzBov
duplication possible de [Avec css est-il possible d'utiliser une image pour la couleur du texte?] (Http://stackoverflow.com/questions/5812236/with- css-is-it-possible-d'utiliser-une-image-pour-couleur-de-texte) –