html - plan - opacité background image css




Comment donner un fond transparent à un texte ou à une image avec CSS? (18)

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>

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.


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.


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.


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


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


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.


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 */
}


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 ?


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:


Presque toutes ces réponses supposent que le concepteur souhaite un fond de couleur unie. Si le concepteur souhaite réellement une photo en arrière-plan, la seule solution réelle 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 demander de nous attribuer un attribut background-opacity! Cela devrait aller de pair avec la fonctionnalité multi-arrière-plans.


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


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


Voici un plugin jQuery qui gèrera tout pour vous, Transify ( Transify - un plugin jQuery permettant d’appliquer facilement la transparence / 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 fait moins de 2 Ko. Il ne nécessite qu'une ligne de code pour le faire fonctionner. Il gère également l'animation de l'opacité de l'arrière-plan, si vous le souhaitez.


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')";

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 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);
  }


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');
}

couleur de fond: rgba (255,0,0,0,5); comme mentionné ci-dessus est la meilleure réponse tout simplement. Dire que l'utilisation de CSS3, même en 2013, n'est pas simple, car le niveau de support de divers navigateurs change à chaque itération.

Bien que la background-color soit supportée par tous les principaux navigateurs (pas nouvelle pour CSS3) [1], la transparence alpha peut être délicate, en particulier avec Internet Explorer antérieur à la version 9 et avec la couleur de bordure sous Safari antérieure à la version 5.1. [2]

Utiliser quelque chose comme Compass ou SASS peut vraiment aider la production et la compatibilité entre plates-formes.

[1] W3Schools: Propriété CSS background-color

[2] Norman's Blog: Liste de contrôle de l'assistance du navigateur CSS3 (octobre 2012)





opacity