Comment donner au texte ou à une image un fond transparent en utilisant CSS?

2283

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>
Développer l'extrait

Il semble que les éléments enfants soient soumis à l'opacité de leurs parents, tout opacity:1comme opacity:0.6le parent.

html  css  opacity 
— Stijn Sanders
source
16
Malheureusement non, CSS3 vise à corriger cela avec le nouveau module de couleur, il vous permettrait de spécifier une valeur alpha chaque fois que vous énoncez une couleur. w3.org/TR/css3-color
— meandmycode
71
En fait, l'opacité des éléments enfants est multipliée par l'opacité de l'élément parent, et non remplacée. Ainsi, par exemple, si l' popacité était .6et que l' spanopacité était, .5alors la véritable opacité du texte dans l'intervalle serait 0.3.
— chharvey
1
Je suppose que oui, mais comme c'est l'arrière-plan qui est translucide, vous n'avez même pas besoin du filtre / de l'opacité: codepen.io/anon/pen/ksJug
— Stijn Sanders
5
@chharvey qu'est-ce qui est censé se produire si je définis opacity:.5pour le parent et opacity:2pour l'élément enfant?
— Alexander
10
@Alexander, je suis content que vous ayez posé cette question. Mathématiquement, on pourrait penser que l'enfant reviendrait à une opacité de 1. Cependant, CSSopacity:2; n'est pas valide . La valeur de la opacitypropriété doit être comprise dans la plage inclusive [0,1].
— chharvey

Réponses:

2276

Utilisez une image PNG semi-transparente ou utilisez CSS 3:

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

Voici un article de css3.info, Opacity , RGBA et compromis (2007-06-03).

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>
Développer l'extrait

— Peter Mortensen
source
86
est-il possible de le faire avec des couleurs hexadécimales? Comme #fff?
— grm
35
@grm: Le W3C a envisagé d'introduire un format de code hexadécimal #RRGGBBAA, mais ils ont décidé de ne pas le faire (pour diverses raisons), donc nous ne pouvons pas.
— Outis
95
@grm avec SASS Vous pouvez,background-color: rgba(#000, .5);
— Jürgen Paul
2
Il convient de souligner que si vous souhaitez utiliser la transparence, tous les navigateurs prenant en charge RGBA prennent également en charge HSLA , qui est un mappage de couleurs beaucoup plus intuitif. IE8 est le seul navigateur pseudosignifiant qui ne le supporte pas, donc à moins d'y aller et d'utiliser HSL (A) pour chaque couleur.
— iono
19
— BoltClock
476

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é.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

Le premier nombre hexadécimal définit la valeur alpha de la couleur.

Solution complète tous les navigateurs:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

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: 

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Chrome-33 IE11 IE9 IE8

— Adrien Be
source
1
Mais pas dans IE8. J'ai essayé la nouvelle syntaxe -ms-filter mais cela ne fonctionnait toujours pas pour moi :(
— philfreo
5
Cet article montre comment le faire dans IE8: robertnyman.com/2010/01/11/…
— Slapout
14
@philfreo: Si vous changez le premier bit du code de Sebastian en "background: rgb (0, 0, 0) transparent;" il devrait maintenant fonctionner dans IE8. Cela me dérangeait depuis un certain temps!
— Tom Chantler
filtre: progid Fonctionne très bien avec IE 9. la couleur est: transparence, rouge, vert, bleu - toutes les valeurs hexadécimales à deux chiffres.
— Thorsten Niehues
1
@AdrienBe - J'ai modifié votre réponse selon vos instructions. Malheureusement, je suis hors de l'espace de tête de cette Q&R particulière depuis un certain temps, donc je ne peux pas ajouter à cette conversation pour le moment.
— user664833
108

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 enfants divau 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.

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>
Développer l'extrait

— Gorkem Pacaci
source
19
Il a déclaré: "Sans séparer le texte et l'arrière-plan en deux éléments placés l'un sur l'autre.". Merci quand même, c'est une bonne solution et c'est utile, mais dans certains cas, vous voudriez que l'élément opaque soit un enfant de l'élément semi-transparent.
— Rolf
J'ai répondu à peu près la même chose sur une autre question SO, mais j'ai ajouté un jsfiddle et des preuves de capture d'écran (IE7 +), voir ici si intéressé stackoverflow.com/a/21984546/759452
— Adrien Be
@Gorkem Pacaci: Assurez-vous que les propriétés d'opacité sont "vraiment" multi-navigateur, vous pouvez utiliser cet extrait de code de CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity
— Adrien Be
Pourquoi ne pas le faire avec un pseudo-élément comme :afteret éviter le balisage supplémentaire?
— AndFisher
64

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»:

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

La technique fonctionne en utilisant deux «couches» à l'intérieur de l'élément de volet extérieur:

  • un (le «dos») qui correspond à la taille de l'élément de volet sans affecter le flux de contenu,
  • et un (le «cont») qui contient le contenu et aide à déterminer la taille du volet.

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:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

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:

  • Les éléments flottants à l'intérieur de la couche cont ne seront pas contenus. Vous devrez vous assurer qu'ils sont effacés ou autrement contenus, sinon ils glisseront par le bas.
  • Les marges vont sur l'élément de volet et le remplissage va sur l'élément cont. N'utilisez pas l'inverse (marges sur le cont ou remplissage sur le volet) ou vous découvrirez des bizarreries telles que la page étant toujours légèrement plus large que la fenêtre du navigateur.
  • Comme mentionné, le tout doit être un bloc ou un bloc en ligne. N'hésitez pas à utiliser <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 / s autospécifiques :widthmin-height

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
Développer l'extrait

Et voici une démonstration en direct de la technique largement utilisée:

Christmas-card-2009.slippyd.com capture d'écran

— Slipp D. Thompson
source
Dans quelle situation ne voudrait-on pas utiliser CSS3 pour cela?
— Burkely91
@ Burkely91 Si vous pouvez le faire en CSS3, alors utilisez absolument cela. Mais l'arrière-plan CSS3 ne prend pas en charge tous les types de contenu ni la flexibilité de la mise en page complète. L'exemple d'enveloppe / lettre ci-dessus serait difficile à retirer avec CSS3 en raison des bords et des remplissages centraux répétés indépendamment. Gardez également à l'esprit que cette réponse a été écrite à l'origine il y a 5 ans, avant que le support CSS3 ne soit généralisé.
— Slipp D. Thompson
2
@Igor Ivancha a annulé vos modifications. Je suis désolé, changer l'indentation de ma forme préférée (tabulations) à la vôtre (2 espaces) n'est pas cool. Vous avez peut-être de bonnes raisons d'utiliser l'indentation à deux espaces dans vos projets de code quotidiens, mais pour la présentation sur le Web, je pense que les onglets ont clairement le gain - l'indentation plus profonde facilite la discernement des niveaux de hiérarchie, et c'est loin il est plus facile de convertir de manière fiable des tabulations en espaces et c'est donc une forme plus compatible de tous les lecteurs.
— Slipp D. Thompson
@Igor Ivancha En outre, il semble que vous ayez exécuté le code via un embellisseur qui a mis chaque sélecteur CSS et chaque propriété sur sa propre ligne. Mes exemples ont été écrits avec des sauts de ligne intentionnels et un espacement pour regrouper logiquement des pièces qui devraient être comprises ensemble par le lecteur - par exemple, la plupart des propriétés width:et height: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.
— Slipp D. Thompson
@Igor Ivancha L'organisation logique, le regroupement et le style sont extrêmement importants pour écrire du code sain et compréhensible, comme c'est le cas avec toutes sortes d'écriture. Les modifications que vous avez apportées étaient équivalentes à l'entrée dans quelqu'un, à la suppression de tous les sauts de paragraphe et à la mise en place d'un saut de ligne forcé après chaque phrase. Si vous souhaitez être aussi pédant obtusément dans votre propre travail, très bien, vous êtes libre de le faire. Mais s'il vous plaît, ne réduisez pas à néant le caractère sémantique et l'expression du travail des autres.
— Slipp D. Thompson
58

Il vaut mieux utiliser un semi-transparent.png .

Il suffit d'ouvrir Photoshop , de créer une 2x2image pixel (la cueillette 1x1peut 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:

<p style="background: url(green.png);">any text</p>

Cela fonctionne bien sûr, sauf dans le charmant Internet Explorer 6 . Il existe de meilleurs correctifs disponibles, mais voici un hack rapide:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
— Communauté
source
54

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:

Opacité d'arrière-plan avec un pseudo-élément

Code pertinent:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>
Développer l'extrait

La prise en charge du navigateur est Internet Explorer 8 et versions ultérieures.

— web-tiki
source
23

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 .

— Chris
source
2
Tout ce dont j'ai besoin, c'est d'une simple couleur d'arrière-plan, quelle taille de PNG proposeriez-vous que je crée avec cette couleur? 1x1 fera beaucoup de travail pour le rendu, trop de pixels rend ce PNG assez grand (devrait être de taille de fichier correcte car compressé, mais le rendu doit toujours être décompressé pour l'utiliser) ...
— Stijn Sanders
3
Je recommanderais quelque chose comme 30px x 30px, qui utilise moins de mémoire lors du rendu répétitif qu'un 1x1, et est toujours assez petit pour minimiser l'utilisation de la bande passante.
— Chris
21

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 opaque z-index.

Un exemple ( violon ) (notez que la DIVclasse with dadest 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):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

avec ce CSS:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

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).

— surgelé
source
17

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 la pbalise 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 ...

— SvenFinke
source
15

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.

— thinsoldier
source
14

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 premier divafin qu'il ne déborde pas.

C'est ça. Voici le code:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>
Développer l'extrait

Cela fonctionne dans Safari 2.x, mais je ne connais pas Internet Explorer.

— paris ionescu
source
L'élément supplémentaire peut être évité et utiliser à la place un pseudo-élément comme :beforeou:after
— surgelé
12

Voici 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.

— joren
source
11

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.

— philnash
source
9

Si vous êtes un mec de Photoshop , vous pouvez également utiliser:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

Ou:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
— suraj rawat
source
8

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,

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

// Plus la valeur est petite, plus elle sera transparente, ou moins la valeur sera transparente.

— Pushp Singh
source
C'est une façon de le faire dans les navigateurs modernes. Je le combine avec les valeurs rgba comme solution de rechange
— Tahir Khalid
Oui correct. C'est l'un des moyens de gérer un navigateur moderne.
— Pushp Singh
Qu'entendez-vous par «ou la valeur la moins sera la transparence» (cela semble incompréhensible)? (Répondez en modifiant votre réponse , pas ici dans les commentaires, le cas échéant.)
— Peter Mortensen
7

CSS 3 a une solution simple à votre problème. Utilisation:

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

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.

— Touhid Rahman
source
En quoi est-ce différent de certaines réponses précédentes?
— Peter Mortensen
6

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)

— Will Nielsen
source
4

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 ()".

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
— Henrik
source
4

Vous pouvez utiliser pur CSS 3 : rgba(red, green, blue, alpha)oùalpha est le niveau de transparence que vous voulez. Il n'est pas nécessaire d'utiliser JavaScript ou jQuery.

Voici un exemple:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
— Peter Mortensen
source
3 
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ?

— premgowda
source
2

Vous pouvez le faire en rgba color codeutilisant CSS comme cet exemple ci-dessous.

.imgbox img{
  height: 100px;
  width: 200px;
  position: relative;
}
.overlay{
  background: rgba(74, 19, 61, 0.4);
  color: #FFF;
  text-shadow: 0px 2px 5px #000079;
  height: 100px;
  width: 300px;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>
Développer l'extrait

— Rudra
source
1

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:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

C'est tout :)

— edd2110
source
1

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:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}
— Alireza
source
1

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.

background-color: rgba(71, 158, 0, 0.8);

Utiliser la couleur d'arrière-plan avec opacité

background-color: rgba(R, G, B, Opacity);

Entrez la description de l'image ici

— Vinod Kumar
source
0

J'utilise normalement cette classe pour mon travail. C'est plutôt bon.

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}
Développer l'extrait

— Cengkuru Michael
source
0

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.

— Donald Shahini
source
0

Vous pouvez utiliser la valeur d'opacité ajoutée à la valeur hexadécimale:

background-color: #11ffeeaa;

Dans cet exemple, aal'opacité. Une opacité 00signifie transparent et ffsignifie couleur unie.

L'opacité est facultative, vous pouvez donc toujours utiliser la valeur hexadécimale:

background-color: #11ffee;

Vous pouvez également utiliser l'ancienne méthode avec rgba():

background-color: rgba(117, 190, 218, 0.5);

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:

background: #11ffeeaa;

D'après les spécifications de Mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-color ):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
— AMS777
source
-2

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é.

div {
  background: rgba(63, 245, 0, 0.5);
}
Développer l'extrait

— Vijay Sharma
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.