html plan Comment donner un fond transparent à un texte ou à une image avec CSS?




opacité background image css (22)

Est-il possible, en utilisant uniquement CSS, de rendre l' background - background d'un élément semi-transparent tout en ayant le contenu (texte & images) de l'élément opaque?

J'aimerais accomplir cela sans avoir le texte et l'arrière-plan comme deux éléments séparés.

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, donc l' opacity:1 est relative à l' opacity:0.6 du parent.


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, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}



Il y a une astuce pour minimiser le balisage: utilisez un pseudo-élément comme arrière-plan et vous pouvez lui régler l'opacité sans affecter l'élément principal et ses enfants:

DEMO

Sortie:

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>

Le navigateur est pris en charge par Internet Explorer 8 et versions ultérieures.


<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/ ?


Il vaut mieux utiliser un .png semi-transparent .

Ouvrez simplement Photoshop , créez une image de 2x2 pixels ( choisir 1x1 peut causer un bogue Internet Explorer! ), Remplissez-le de couleur verte et réglez l'opacité dans "Calques" à 60%. Puis enregistrez-le et faites-en une image de fond:

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

Cela fonctionne bien, sauf dans Internet Explorer 6 . Il y a de meilleurs correctifs disponibles, mais voici un petit hack:

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

Il y a quelque temps, j'ai écrit à ce sujet dans Transparence en arrière-plan croisée avec différents navigateurs .

Bizarrement, Internet Explorer 6 vous permettra de rendre l'arrière-plan transparent et de garder le texte au dessus complètement opaque. Pour les autres navigateurs, je suggère ensuite d'utiliser un fichier PNG transparent.


Le problème est que le texte A réellement une opacité totale dans votre exemple. Il a une opacité totale à l'intérieur de la balise p , mais la balise p est simplement 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 le diviser en 2 éléments et déplacer le texte sur la zone (par exemple, la marge négative).

Sinon ce ne sera pas possible.

MODIFIER:

Tout comme Chris l'a mentionné: si vous utilisez un fichier PNG transparent, vous devez utiliser une solution de contournement JavaScript pour le faire fonctionner dans le fastidieux Internet Explorer ...


Vous pouvez faire avec le rgba color code utilisant css comme dans cet exemple donné 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>


Il existe une solution plus simple qui consiste à superposer 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 incrustée comme ceci:

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

C'est tout :)


Vous pouvez utiliser du CSS 3 pur: rgba(red, green, blue, alpha) , où alpha est le niveau de transparence souhaité. Il n'y a pas besoin de JavaScript ou de jQuery.

Voici un exemple:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

Vous pouvez utiliser RGBA (red, green, blue, alpha) dans le CSS , quelque chose comme ceci:

Alors faites simplement quelque chose comme ça va marcher dans votre cas:

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

span {
  color: white;
}

Vous pouvez résoudre ce problème pour Internet Explorer 8 en utilisant (ab) à l'aide de la syntaxe en dégradé. Le format de couleur est ARGB. Si vous utilisez le préprocesseur Sass vous pouvez convertir les couleurs à l'aide de 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')";

Utilisez une image PNG semi-transparente ou utilisez CSS3:

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

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


La méthode la plus simple consiste à 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 PNG transparent dans Internet Explorer 6 .

Autre que ça,

vous pouvez le simuler en utilisant two side-by-side sibling elements - en faire un semi-transparent , puis absolutely position the other over the top ?


Si vous utilisez Less , vous pouvez utiliser le fade(color, 30%) .


Afin de rendre l'arrière-plan d'un élément semi-transparent mais d'avoir le contenu (texte & images) de l'élément opaque. Vous devez écrire du code CSS pour cette image et ajouter un attribut appelé opacity avec une valeur minimale. par exemple

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

// moins la valeur sera grande, moins la valeur sera transparente.


Dans Firefox 3 et Safari 3, vous pouvez utiliser RGBA comme l'a mentionné Georg Schölly .

Une astuce peu connue est que vous pouvez également l'utiliser dans Internet Explorer à l'aide du filtre de 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 des résultats:

C'est en utilisant le 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>


Vous pouvez utiliser une couleur RVB avec une opacité telle que ce code de couleur en RVB (63 245,0) et ajouter une opacité telle que (63 245,0,0,5) et également ajouter une RVBA remplacer RVB. Un usage pour l'opacité

div{
  background:rgba(63,245,0,0.5);
  }


Cette méthode vous permet d’avoir une image à l’arrière-plan et pas seulement une couleur unie. Vous pouvez aussi utiliser 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é permettant de laisser l'élément à son opacité d'origine. Ainsi, vous pouvez utiliser: avant de créer un faux élément et lui donner le fond transparent (ou les bordures) que vous voulez et le déplacer derrière le contenu que vous souhaitez conserver opaque avec z-index .

Un exemple ( fiddle ) (notez que la DIV avec la classe dad pour seul but de fournir un contexte et un contraste avec les couleurs, cet élément supplémentaire n’est en fait pas nécessaire, et le rectangle rouge est déplacé un peu vers la droite et pour laisser visible le arrière-plan derrière l'élément fancyBg ):

<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:before a les propriétés CSS que vous voulez avoir avec la transparence (arrière-plan 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 ce qui convient le mieux à vos besoins).


C’est la meilleure solution que je puisse proposer, sans utiliser CSS 3. Et cela fonctionne très bien sous Firefox, Chrome et Internet Explorer, autant que je sache.

Placez un conteneur DIV et deux DIV enfants au même niveau, un pour le contenu, un pour l'arrière-plan. Et en utilisant CSS, redimensionnez automatiquement l’arrière-plan en fonction du contenu et placez-le réellement à l’arrière en utilisant 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>


CSS3 a une solution facile à votre problème. Utilisation:

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

Ici, rgba signifie rouge, vert, bleu et alpha. La valeur verte est obtenue en raison de 255 et la demi-transparence est obtenue avec une valeur de 0,5 alpha.


Pour une couleur de fond 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é (animation, plusieurs arrière-plans, etc.) ou si vous ne voulez pas vous fier à CSS3, vous pouvez essayer la «technique du 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.

La position: relative sur le volet est importante; il dit que la couche s'adapte à la taille de la fenêtre. (Si vous souhaitez que la <p> soit absolue, remplacez le volet <p> par un <span> et encapsulez le tout dans une balise <p> position absolue.)

Le principal avantage de cette technique par rapport aux solutions similaires répertoriées ci-dessus est que le volet ne doit pas nécessairement avoir une taille spécifiée. comme indiqué ci-dessus, il s'adapte à la largeur totale (disposition normale des éléments de bloc) et à la hauteur du contenu. L'élément de volet extérieur peut être dimensionné à votre guise, à condition qu'il soit rectangulaire (c'est-à-dire que le bloc en ligne fonctionnera, mais pas le bloc en ligne ancien).

En outre, cela vous laisse beaucoup de liberté pour l'arrière-plan; vous êtes libre de vraiment mettre quoi que ce soit dans l'élément arrière sans que cela affecte le flux de contenu (si vous souhaitez plusieurs sous-calques de taille normale, assurez-vous qu'ils ont également la position: absolute, width / height: 100%, et haut / bas / gauche / droite: auto).

Une variante permettant l'ajustement des incrustations d'arrière-plan (via haut / bas / gauche / droite) et / ou le repérage d'arrière-plan (via la suppression d'une des paires gauche / droite ou haut / bas) consiste à utiliser le code CSS suivant:

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

Comme cela est écrit, cela fonctionne dans Firefox, Safari, Chrome, IE8 + et Opera, bien que IE7 et IE6 requièrent 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.

Choses à surveiller:

  • Les éléments flottants à l'intérieur du calque cont ne seront pas contenus. Vous devrez vous assurer qu'ils sont nettoyés ou autrement contenus, sinon ils glisseront du fond.
  • Les marges vont sur l'élément du volet et le remplissage sur l'élément cont. N'utilisez pas l'inverse (marges dans la zone de navigation ou remplissage dans le volet), sinon vous découvrirez des bizarreries telles que la page toujours légèrement plus large que la fenêtre du navigateur.
  • Comme mentionné, le tout doit être bloqué ou bloqué. N'hésitez pas à utiliser <div> s au lieu de <span> s pour simplifier votre CSS.

Une démonstration plus complète, montrant la flexibilité de cette technique en l’utilisant en tandem avec display: inline-block , et avec les width auto et spécifique s / min-height s:

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

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





opacity