web-dev-qa-db-fra.com

CSS - Texte opaque sur div faible opacité?

J'ai un div avec 60% d'opacité, pour montrer une partie de l'image d'arrière-plan derrière le div. L'opacité étant à 60%, le texte de cette div apparaît en gris.

Est-il possible de surcharger ce niveau et de faire apparaître le texte en noir?

Tout conseil apprécié.

Merci.

cssopacity
39
Dan

Définissez l'opacité sur l'arrière-plan plutôt que sur l'élément.

background-color: rgba(255,0,0,0.6);

Il y a quelque temps, j'ai écrit sur la manière de y parvenir de manière rétrocompatible .

63
Quentin

J'ai déjà expérimenté cela sur mon propre site web. De loin, la méthode la plus simple pour obtenir ce que vous voulez consiste à créer une image .PNG à pixel unique dont l'opacité est définie à moins de 100% (c'est-à-dire partiellement transparente) et à l'utiliser comme image d'arrière-plan. Par défaut, il remplit tout l'élément contenant. Assurez-vous que l'attribut CSS background-repeat est défini sur 'repeat' s'il ne le fait pas.

En faisant les choses de cette façon, vous n'avez pas besoin de définir la transparence sur l'élément contenant lui-même, l'opacité de son texte ne sera donc pas affectée.

Étonnamment, il existe juste l'outil pour faire un .PNG ici un pixel unique semi-transparent.

4
JohnTheTinkerer

L'opacité s'applique à l'ensemble de la div et à tous ses enfants. Malheureusement, vous ne pouvez pas annuler cette opacité, mais seulement en ajouter. De plus, CSS n'a aucun moyen de sélectionner le texte contenu dans un élément.

Dans votre cas, la meilleure solution consiste à appliquer une image d'arrière-plan transparente (avec le format PNG) à votre bloc div, comme une image blanche d'un pixel avec une opacité de 60%.

Une autre solution consisterait à utiliser des cases et un positionnement différents, comme décrit dans ce tutoriel de Steven York .

2
Johann Philipp Strathausen

cela devrait répondre à peu près à toutes vos questions: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

0
CIDIC

La solution la plus simple serait de créer un fichier PNG semi-transparent avec la couleur correcte et de l’utiliser comme image de fond.

Une autre solution possible en fonction de votre mise en page consiste à placer le texte dans un calque séparé et à le positionner par-dessus la partie semi-transparente. Quelque chose comme ça marcherait:

<div style="position: relative; background-image: url('your_image.jpg')">
    <div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
    <div style="position: absolute">The text to go on top</div>
</div>

Vous devez ajouter vos propres positions/tailles (propriétés top, left, width et height) selon les cas.

0
DisgruntledGoat