Puis-je faire knock-out/punch-grâce à la transparence du CSS pour les polices?

Je voudrais savoir si il existe un moyen que je peux appliquer à 100% de transparence, de texte, de sorte que l'on peut voir l'image d'arrière-plan de la page dans les caractères dans le texte.

c'est à dire, imaginez que j'ai un <div> avec un fond blanc, et une image de fond sur <body>. J'aimerais définir le texte à l'intérieur de la <div> de sorte que l'image de fond sur <body> peut être vu à travers le texte, malgré le fond blanc sur le <div>.

Je pourrais probablement utiliser une inversion de la police, mais je préférerais une meilleure façon de le faire si il y en a un.

OriginalL'auteur Roch | 2010-02-18

10

- T-il dynamique? La seule façon de le faire est avec une image avec de la transparence (GIF ou, mieux, PNG).

Je ne suis pas sûr si c'est ce que vous voulez, mais va expliquer ça de toute façon.

Situation: vous n'avez pas un fond uni que vous souhaitez abeille vu à travers votre texte.

Solution: pas de CSS est venue à la rescousse pour cela. Vous aurez à utiliser votre fidèle éditeur d'image pour créer un calque de texte, et une autre couche qui sera le négatif de votre texte

Cela pourrait vous permettre d'avoir des effets intéressants, mais si vous voulez qu'il soit dynamique, vous aurez pour générer les images à la volée serverside.

Ce genre de supercherie est actuellement impossible avec pure CSS (qui pourrait être possible en Javascript).

Modifier

Voir Paul trouver sur webkit m'a fait réfléchir sur la façon de simuler le comportement de Firefox, Opera et IE. Jusqu'à présent, j'ai eu de la chance en utilisant le toile élément sur Firefox, et je vais essayer de trouver un comportement dans filter:progid:DXImageTransform.Microsoft.

Jusqu'à présent avec canvas, c'est ce que j'ai fait
```
<html>
<body>
<canvas id="c" width="150" height="150">
</canvas>
<script>
ctx = document.getElementById("c").getContext("2d");
//draw rectangle filling the canvas element
ctx.fillStyle = "red";
ctx.fillRect(0,0,150,150);

//set composite property
ctx.globalCompositeOperation = 'destination-out'; 
//the text to be added now will "crop out" the red rectangle
ctx.strokeText("Cropping the", 10, 20);  
ctx.strokeText("red rectangle", 10, 40);  

</script>
</body>
</html>
```
à l'aide d'un detination-out de compositing et le dessin du texte sur le toile.

Oh! Maintenant, je reçois ce mnml demande. Désolé, semble aujourd'hui évident.
Pour le record, je pense que cela s'appelle le "punch-through" ou "knock-out" de la transparence - voir par exemple help.adobe.com/en_US/photoshop/cs/using/... (et stackoverflow.com/q/7626219/20578).
Eugh, toutes vos images ne fonctionnent plus. Je ne pense pas que vous pouvez re-télécharger tous les remplacements à l'aide de la Pile d'Échange d'image uploader? En attendant, j'ai édité les images, mais a essayé de garder la valeur de la poste... de toute évidence, n'hésitez pas à modifier quoi que ce soit de nouveau si j'ai en quelque sorte invalidé vos points (et désolé si j'ai fait!).

OriginalL'auteur Esteban Küber
6

Je ne suis pas exactement clair ce que vous demandez (transparence de 100% signifie que quelque chose de l'invisible, et de texte invisible n'est généralement pas une bonne idée), mais en général:
1. Le CSS opacity propriété s'applique à la totalité d'un élément, et pas seulement son texte. Donc si vous avez ce code HTML:
```
<div class="opacity-50">
    This is a div with a background colour and 50% opacity
</div>
```
  Et ce CSS:
```
.opacity-50 {
    background: #ccc;
    color: #000;
    opacity: 0.5;
}
```
  Alors à la fois de son contexte et de son texte aura une opacité de 50%.
2. rgba les valeurs de couleurs vous permettent de spécifier semi-transparent couleurs. Donc, si vous avez ce code HTML:
```
<div class="text-opacity-50">
    This is a div with semi-transparent text
</div>
```
  Et ce CSS:
```
.text-opacity-50 {
    background: #ccc;
    color: rgba(0,0,0,0.5);
}
```
  Alors seulement son texte aura une opacité de 50%.
Je pense que rgba valeurs des couleurs sont pris en charge par un peu moins de parcours que opacity.

Ce que je voulais dire: [transparent-texte/InsideA/couleur Div]-[couleur d'arrière-plan] merci pour l'explication
Je ne suis pas super clair sur ce que cette combinaison de signes de ponctuation signifie soit, pour être honnête.
J'essayais juste d'expliquer les "couches" de ce que je veux faire

OriginalL'auteur Paul D. Waite
4

Ah — si vous parlez de “punch-through” de la transparence, de non, le CSS ne fait pas cela.

Sauf pour WebKit (le moteur de rendu de Safari et Chrome), qui a totalement personnalisée, faite par Dave Hyatt, même-pas-en-CSS-3 la valeur de la propriété, -webkit-background-clip: texte;.

Aucun autre navigateur autre que Safari et Chrome prend en charge.

+1 trouvaille Intéressante! Confirmé sur Chrome. Aucun autre navigateur (pas même Konqueror) prend en charge tout de suite. J'imagine que vous pouvez faire semblant avec quelques astuces sur IE et sur Firefox il pourrait être fait avec javascript (je sais que j'ai vu quelque chose comme ça quelque part). Comme pour l'Opéra...
Très agréable, je voudrais utiliser que si firefox a l'aide de webkit. Je vais rester avec voyager de réponse pour l'instant, je suppose.
Ouais, WebKit est le lieu où les CSS de l'innovation qui se passe le plus rapide. (Bien que la plupart de leurs innovations ne semblent Mac OS X internes exposés par les CSS, qui je pense est une sorte de tricherie — Mozilla ne vend pas un système d'exploitation, de sorte qu'ils n'ont pas un organe similaire de code pour appeler.)
Oh — pourriez-vous faux ce avec JavaScript dans Firefox? Je ne peux pas imaginer comment.
Sur IE, j'imagine qu'il y a quelque chose dans filter:progid:DXImageTransform.Microsoft que vous pourriez utiliser. Sur FF, vous pourriez être en mesure de faire une Toile ou SVG supercherie.

OriginalL'auteur Paul D. Waite
1

Vous pouvez passer le temps à faire votre propre police de caractères avec InkScape et IcoMoon et de faire un négatif assommé police, puis vos lettres peuvent être voir auge! J'ai utilisé cette technique pour certains voir auge Icônes.

OriginalL'auteur Joris
0

Pourquoi ne pas essayer de mettre le DIV de l'image d'arrière-plan à un GIF transparent?

http://www.pageresource.com/dhtml/csstut9.htm

OriginalL'auteur Douglas Held
0

À l'aide d'un .png sans fond est une bonne méthode. Dans Photoshop, vous pouvez l'enregistrer pour le web.

ou dans le css:
```
#div
{
    background:transparent;
    color:whatever;

}
```
OriginalL'auteur user2116899

Vous devez vous connecter pour publier un commentaire.

Modifier