Est-il possible, en utilisant uniquement CSS, de rendre backgroundsemi-transparent un élément mais d'avoir le contenu (texte & images) de l'élément opaque?
Je voudrais accomplir cela sans avoir le texte et l'arrière-plan comme deux éléments distincts.
En essayant:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}<p>
<span>Hello world</span>
</p>Il semble que les éléments enfants soient soumis à l'opacité de leurs parents, tout opacity:1comme opacity:0.6le parent.
popacité était.6et que l'spanopacité était,.5alors la véritable opacité du texte dans l'intervalle serait0.3.opacity:.5pour le parent etopacity:2pour l'élément enfant?opacity:2;n'est pas valide . La valeur de laopacitypropriété doit être comprise dans la plage inclusive [0,1].Réponses:
Utilisez une image PNG semi-transparente ou utilisez CSS 3:
Voici un article de css3.info, Opacity , RGBA et compromis (2007-06-03).
la source
background-color: rgba(#000, .5);Dans Firefox 3 et Safari 3, vous pouvez utiliser RGBA comme Georg Schölly l'a mentionné .
Une astuce peu connue est que vous pouvez également l'utiliser dans Internet Explorer en utilisant le filtre dégradé.
Le premier nombre hexadécimal définit la valeur alpha de la couleur.
Solution complète tous les navigateurs:
Cela provient de la transparence de l'arrière-plan CSS sans affecter les éléments enfants, via RGBa et les filtres .
Captures d'écran preuve des résultats:
C'est lors de l'utilisation du code suivant:
la source
C'est la meilleure solution que j'ai pu trouver, sans utiliser CSS 3. Et cela fonctionne très bien sur Firefox, Chrome et Internet Explorer pour autant que je puisse voir.
Mettez un conteneur
divet deux enfantsdivau même niveau, un pour le contenu, un pour l'arrière-plan. Et en utilisant CSS, redimensionnez automatiquement l'arrière-plan pour l'adapter au contenu et placez l'arrière-plan réellement à l'arrière à l'aide de z-index.la source
:afteret éviter le balisage supplémentaire?Pour une couleur d'arrière-plan semi-transparente simple, les solutions ci-dessus (images CSS3 ou bg) sont les meilleures options. Cependant, si vous voulez faire quelque chose de plus sophistiqué (par exemple, animation, arrière-plans multiples, etc.), ou si vous ne voulez pas compter sur CSS3, vous pouvez essayer la «technique de volet»:
La technique fonctionne en utilisant deux «couches» à l'intérieur de l'élément de volet extérieur:
Le
position: relativevolet sur est important; il indique au calque arrière de s'adapter à la taille du volet. (Si vous avez besoin que la<p>balise soit absolue, changez le volet de a<p>à a<span>et enveloppez tout cela dans une<p>balise à position absolue .)Le principal avantage de cette technique sur les similaires énumérés ci-dessus est que le volet n'a pas à être d'une taille spécifiée; comme codé ci-dessus, il s'adaptera à toute la largeur (disposition normale des éléments de bloc) et seulement aussi haut que le contenu. L'élément de volet extérieur peut être dimensionné comme vous le souhaitez, tant qu'il est rectangulaire (c'est-à-dire que le bloc en ligne fonctionnera; en ligne ancien non).
En outre, cela vous donne beaucoup de liberté pour l'arrière-plan; vous êtes libre de vraiment mettre n'importe quoi dans l'élément arrière et que cela n'affecte pas le flux de contenu (si vous voulez plusieurs sous-couches en taille réelle, assurez-vous simplement qu'elles ont également la position: absolue, largeur / hauteur: 100%, et haut / bas / gauche / droite: auto).
Une variante pour permettre le réglage de l'encart d'arrière-plan (via haut / bas / gauche / droite) et / ou l'épinglage d'arrière-plan (via la suppression d'une des paires gauche / droite ou haut / bas) consiste à utiliser le CSS suivant à la place:
Comme écrit, cela fonctionne dans Firefox, Safari, Chrome, IE8 + et Opera, bien qu'IE7 et IE6 nécessitent des CSS et des expressions supplémentaires, IIRC, et la dernière fois que j'ai vérifié, la deuxième variante CSS ne fonctionne pas dans Opera.
À surveiller:
<div>s au lieu de<span>s pour simplifier votre CSS.Une démo plus complète, montrant la flexibilité de cette technique en l'utilisant en tandem avec
display: inline-block, et avec les deux s / sautospécifiques :widthmin-heightEt voici une démonstration en direct de la technique largement utilisée:
la source
width:etheight:partagent une ligne parce qu'elles sont le même type de construction et mieux comprises comme une forme bidimensionnelle, pas une paire de contraintes unidimensionnelles. De plus, certaines lignes ont une bonne quantité de contenu, car c'est un contenu répété qui n'est pas si important à montrer.Il vaut mieux utiliser un semi-transparent
.png.Il suffit d'ouvrir Photoshop , de créer une
2x2image pixel (la cueillette1x1peut provoquer un bug d'Internet Explorer! ), De la remplir de couleur verte et de régler l'opacité dans "Onglet Calques" à 60%. Ensuite, enregistrez-le et faites-en une image d'arrière-plan:Cela fonctionne bien sûr, sauf dans le charmant Internet Explorer 6 . Il existe de meilleurs correctifs disponibles, mais voici un hack rapide:
la source
Il existe une astuce pour minimiser le balisage: utilisez un pseudo-élément comme arrière-plan et vous pouvez lui définir l'opacité sans affecter l'élément principal et ses enfants:
DEMO
Production:
Code pertinent:
La prise en charge du navigateur est Internet Explorer 8 et versions ultérieures.
la source
La méthode la plus simple serait d'utiliser une image PNG d' arrière-plan semi-transparente .
Vous pouvez utiliser JavaScript pour le faire fonctionner dans Internet Explorer 6 si vous en avez besoin.
J'utilise la méthode décrite dans les PNG transparents dans Internet Explorer 6 .
En dehors de cela, vous pouvez le simuler en utilisant deux éléments frères côte à côte - créez l' un semi-transparent , puis positionnez absolument l'autre au-dessus .
la source
Cette méthode vous permet d'avoir une image en arrière-plan et pas seulement une couleur unie, et peut être utilisée pour avoir de la transparence sur d'autres attributs tels que les bordures. Aucune image PNG transparente n'est requise.
Utilisez
:before(ou:after) en CSS et donnez-leur la valeur d'opacité pour laisser l'élément à son opacité d'origine. Ainsi, vous pouvez utiliser: avant pour créer un faux élément et lui donner l'arrière-plan transparent (ou les bordures) que vous souhaitez et le déplacer derrière le contenu avec lequel vous souhaitez rester opaquez-index.Un exemple ( violon ) (notez que la
DIVclasse withdadest juste pour fournir du contexte et du contraste aux couleurs, cet élément supplémentaire n'est en fait pas nécessaire, et le rectangle rouge est déplacé un peu vers le bas et vers la droite pour laisser l'arrière-plan visible derrière l'fancyBgélément):avec ce CSS:
Dans ce cas,
.fancyBg:beforea les propriétés CSS que vous souhaitez avoir avec la transparence (fond rouge dans cet exemple, mais peut être une image ou des bordures). Il est positionné comme absolu pour le déplacer derrière.fancyBg(utilisez des valeurs de zéro ou tout ce qui convient le mieux à vos besoins).la source
Le problème est que le texte a en fait une opacité totale dans votre exemple. Il a une opacité totale à l'intérieur de la
pbalise, mais lapbalise est juste semi-transparente.Vous pouvez ajouter une image d'arrière-plan PNG semi-transparente au lieu de la réaliser en CSS, ou séparer le texte et diviser en deux éléments et déplacer le texte sur la zone (par exemple, marge négative).
Sinon, ce ne sera pas possible.
Tout comme Chris l'a mentionné: si vous utilisez un fichier PNG avec transparence, vous devez utiliser une solution de contournement JavaScript pour le faire fonctionner dans le satané Internet Explorer ...
la source
Presque toutes ces réponses supposent que le concepteur souhaite un fond de couleur unie. Si le concepteur veut réellement une photo comme arrière-plan, la seule vraie solution pour le moment est JavaScript comme le plugin jQuery Transify mentionné ailleurs .
Ce que nous devons faire, c'est rejoindre la discussion du groupe de travail CSS et leur faire nous donner un attribut background-opacity! Cela devrait fonctionner main dans la main avec la fonction d'arrière-plans multiples.
la source
Voici comment je fais cela (ce n'est peut-être pas optimal, mais cela fonctionne):
Créez le
divque vous souhaitez être semi-transparent. Donnez-lui une classe / id. Laissez-le vide et fermez-le. Donnez-lui une hauteur et une largeur définies (disons, 300 pixels sur 300 pixels). Donnez-lui une opacité de 0,5 ou ce que vous voulez, et une couleur de fond.Ensuite, directement en dessous de ce div, créez un autre div avec une classe / id différente. Créez un paragraphe à l'intérieur, où vous placerez votre texte. Donnez la
divposition: relative et en haut:-295px(c'est négatif 295 pixels). Donnez-lui un indice z de 2 pour faire bonne mesure et assurez-vous que son opacité est de 1. Stylez votre paragraphe comme vous le souhaitez, mais assurez-vous que les dimensions sont inférieures à celles du premierdivafin qu'il ne déborde pas.C'est ça. Voici le code:
Cela fonctionne dans Safari 2.x, mais je ne connais pas Internet Explorer.
la source
:beforeou:afterVoici un plugin jQuery qui gérera tout pour vous, Transify ( Transify - un plugin jQuery pour appliquer facilement la transparence / l'opacité à l'arrière-plan d'un élément ).
Je rencontrais ce problème de temps en temps, alors j'ai décidé d'écrire quelque chose qui rendrait la vie beaucoup plus facile. Le script est inférieur à 2 Ko et il ne nécessite qu'une seule ligne de code pour le faire fonctionner, et il gérera également l'animation de l'opacité de l'arrière-plan si vous le souhaitez.
la source
Il y a quelque temps, j'ai écrit à ce sujet dans Cross Browser Background Transparency With CSS .
Bizarrement, Internet Explorer 6 vous permettra de rendre l'arrière-plan transparent et de garder le texte entièrement opaque. Pour les autres navigateurs, je suggère ensuite d'utiliser un fichier PNG transparent.
la source
Opacité du fond, mais pas le texte a quelques idées. Utilisez une image semi-transparente ou superposez un élément supplémentaire.
la source
Si vous êtes un mec de Photoshop , vous pouvez également utiliser:
Ou:
la source
Afin de rendre l'arrière-plan d'un élément semi-transparent, mais d'avoir le contenu (texte et images) de l'élément opaque, vous devez écrire du code CSS pour cette image, et vous devez ajouter un attribut appelé
opacityavec une valeur minimale.Par exemple,
// Plus la valeur est petite, plus elle sera transparente, ou moins la valeur sera transparente.
la source
CSS 3 a une solution simple à votre problème. Utilisation:
Ici,
rgbareprésente la valeur rouge, verte, bleue et alpha. La valeur verte est obtenue en raison de 255 et la moitié de la transparence est obtenue par une valeur de 0,5 alpha.la source
Si vous utilisez moins , vous pouvez utiliser
fade(color, 30%).la source
couleur de fond: rgba (255, 0, 0, 0.5);comme mentionné ci-dessus est la meilleure réponse tout simplement. Dire qu'utiliser CSS 3, même en 2013, n'est pas simple car le niveau de support des différents navigateurs change à chaque itération.
Bien qu'il
background-colorsoit pris en charge par tous les principaux navigateurs (pas nouveau pour CSS 3) [1], la transparence alpha peut être délicate, en particulier avec Internet Explorer avant la version 9 et avec la couleur des bordures sur Safari avant la version 5.1. [2]L'utilisation de quelque chose comme Compass ou SASS peut vraiment aider la production et la compatibilité multiplateforme.
[1] W3Schools: propriété CSS background-color
[2] Blog de Norman: Liste de contrôle de prise en charge du navigateur CSS3 (octobre 2012)
la source
Vous pouvez résoudre ce problème pour Internet Explorer 8 en (ab) en utilisant la syntaxe de gradient. Le format de couleur est ARGB. Si vous utilisez le préprocesseur Sass, vous pouvez convertir les couleurs en utilisant la fonction intégrée "ie-hex-str ()".
la source
Vous pouvez utiliser pur CSS 3 :
rgba(red, green, blue, alpha)oùalphaest le niveau de transparence que vous voulez. Il n'est pas nécessaire d'utiliser JavaScript ou jQuery.Voici un exemple:
la source
http://jsfiddle.net/x2ukko7u/ ?
la source
Vous pouvez le faire en
rgba color codeutilisant CSS comme cet exemple ci-dessous.la source
Il existe une solution plus simple pour mettre une superposition sur une image sur la même div. Ce n'est pas la bonne utilisation de cet outil. Mais fonctionne comme un charme pour faire cette superposition en utilisant CSS.
Utilisez une ombre en incrustation comme celle-ci:
C'est tout :)
la source
Vous pouvez utiliser RGBA
(red, green, blue, alpha)dans le CSS . Quelque chose comme ça:Donc, faire simplement quelque chose comme ça va fonctionner dans votre cas:
la source
Selon mon point de vue, la meilleure façon d'utiliser une couleur d'arrière-plan avec opacité est la suivante. Si nous utilisons cela, nous ne perdrons pas l'opacité pour les autres éléments, comme la couleur de test, la bordure, etc.
Utiliser la couleur d'arrière-plan avec opacité
la source
J'utilise normalement cette classe pour mon travail. C'est plutôt bon.
la source
Cela a fonctionné pour moi lors de l'utilisation du format,
#AARRGGBBdonc celui qui fonctionnait pour moi l'était#1C00ff00. Essayez-le, car je l'ai vu fonctionner pour certains et pas pour quelqu'un d'autre. Je l'utilise en CSS.la source
Vous pouvez utiliser la valeur d'opacité ajoutée à la valeur hexadécimale:
Dans cet exemple,
aal'opacité. Une opacité00signifie transparent etffsignifie couleur unie.L'opacité est facultative, vous pouvez donc toujours utiliser la valeur hexadécimale:
Vous pouvez également utiliser l'ancienne méthode avec
rgba():Et le
backgroundraccourci si vous voulez vous assurer que l'arrière-plan n'a pas d'autres styles, comme des images ou des dégradés:D'après les spécifications de Mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-color ):
la source
Vous pouvez utiliser la couleur RVB avec opacité comme un code couleur en RVB (63, 245, 0) et ajouter l'opacité (comme 63, 245, 0, 0,5) et également remplacer RVB par RVBA.
Adoit être utilisé pour l'opacité.la source