Domanda Come faccio a dare del testo o un'immagine uno sfondo trasparente usando i CSS?


E 'possibile, usando solo i CSS, fare il background di un elemento semi-trasparente ma il contenuto (testo e immagini) dell'elemento è opaco?

Mi piacerebbe farlo senza avere il testo e lo sfondo come due elementi separati.

Quando provi:

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>

Sembra che gli elementi figlio siano sottoposti all'opacità dei loro genitori, quindi opacity:1 è relativo al opacity:0.6 del genitore.


1996
2018-04-30 09:00


origine


risposte:


O usare un semi-trasparente PNG immagine o usa CSS3:

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

Ecco un articolo da css3.info, Opacità, RGBA e compromesso (2007-06-03).


2114
2017-07-13 20:51



In Firefox 3 e Safari 3, puoi usare RGBA come Georg Schölly menzionato.

Un trucco poco noto è che puoi usarlo anche in Internet Explorer usando il filtro del gradiente.

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

Il primo numero esadecimale definisce il valore alfa del colore.

Soluzione completa per tutti i browser:

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

Questo è da Trasparenza di sfondo CSS senza effetti sugli elementi secondari, tramite RGBa e filtri.

Schermata di prova dei risultati:

Questo è quando si utilizza il seguente codice:            

 <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


456
2018-04-30 20:42



Questa è la soluzione migliore che potrei trovare, NON usare CSS 3. E funziona perfettamente su Firefox, Chrome e Internet Explorer per quanto posso vedere.

Metti un DIV contenitore e due DIV figlio nello stesso livello, uno per il contenuto, uno per lo sfondo. E usando CSS, ridimensiona automaticamente lo sfondo per adattarlo al contenuto e posiziona lo sfondo nella parte posteriore usando 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>


97
2018-05-24 16:07



È meglio usare un semi-trasparente .png.

Apri Photoshop, creare un 2x2 immagine pixel (scelta 1x1 può causare un bug di Internet Explorer!), riempilo con un colore verde e imposta l'opacità in "Livelli" al 60%. Quindi salvalo e rendilo un'immagine di sfondo:

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

Funziona bene, naturalmente, tranne che in adorabile Internet Explorer 6. Ci sono soluzioni migliori disponibili, ma ecco un trucco veloce:

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

54
2017-10-05 08:15



Per un semplice colore di sfondo semi-trasparente, le soluzioni di cui sopra (immagini CSS3 o bg) sono le migliori opzioni. Tuttavia, vuoi fare qualcosa di più divertente (ad es. Animazione, sfondi multipli, ecc.), O se non vuoi fare affidamento su CSS3, puoi provare la "tecnica del pannello":

.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 tecnica funziona utilizzando due "livelli" all'interno dell'elemento del riquadro esterno:

  • uno (il "dietro") che si adatta alle dimensioni dell'elemento del riquadro senza influire sul flusso del contenuto,
  • e uno (il "cont") che contiene il contenuto e aiuta a determinare la dimensione del riquadro.

Il position: relative sul pannello è importante; indica al livello precedente di adattarsi alle dimensioni del riquadro. (Se hai bisogno del <p> tag per essere assoluto, cambia il riquadro da a <p> a a <span> e avvolgere tutto ciò in una posizione assolutamente <p> etichetta.)

Il vantaggio principale di questa tecnica rispetto a quelli sopra elencati è che il pannello non deve essere una dimensione specificata; come sopra codificato, si adatterà a tutta larghezza (normale layout di elementi di blocco) e solo al livello del contenuto. L'elemento riquadro esterno può essere ridimensionato in qualsiasi modo, a patto che sia rettangolare (vale a dire che il blocco inline funzionerà, il normale inline non lo farà).

Inoltre, ti dà molta libertà per lo sfondo; sei libero di mettere qualsiasi cosa nell'elemento back e non influire sul flusso di contenuti (se vuoi più sub-layer a grandezza naturale, assicurati che abbiano anche position: absolute, width / height: 100%, e in alto / in basso / a sinistra / a destra: auto).

Una variante per consentire la regolazione dell'insetto di sfondo (tramite alto / basso / sinistra / destra) e / o il blocco dello sfondo (rimuovendo una delle coppie sinistra / destra o superiore / inferiore) è invece di utilizzare il seguente CSS:

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

Come scritto, questo funziona in Firefox, Safari, Chrome, IE8 + e Opera, sebbene IE7 e IE6 richiedano CSS e espressioni extra, IIRC, e l'ultima volta che ho controllato, la seconda variante CSS non funziona in Opera.

Cose a cui prestare attenzione:

  • Gli elementi mobili all'interno del livello cont non saranno contenuti. Dovrai assicurarti che siano cancellati o altrimenti contenuti, altrimenti scivoleranno fuori dal fondo.
  • I margini vanno sull'elemento del riquadro e il riempimento passa sull'elemento cont. Non usare il contrario (margini sul cont o riempimento sul pannello) o scoprirai delle stranezze come la pagina sempre leggermente più larga della finestra del browser.
  • Come detto, l'intera cosa deve essere blocco o blocco in linea. Sentiti libero di usare <div>s invece di <span>s per semplificare il tuo CSS.

Una demo più completa, che mostra la flessibilità di questa tecnica usandola in tandem con display: inline-blocke con entrambi auto & specifica widthS/min-heightS:

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

Ed ecco a dimostrazione dal vivo della tecnica utilizzata ampiamente:

christmas-card-2009.slippyd.com screenshot


51
2018-04-30 09:11



C'è un trucco per minimizzare il markup: Usa a pseudo elemento come sfondo e puoi impostarne l'opacità senza influire sull'elemento principale e sui suoi figli:

DEMO

Produzione:

Background opacity with a pseudo element

Codice pertinente:

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>

Il supporto del browser è Internet Explorer 8 e più tardi.


47
2018-01-14 00:14



Il metodo più semplice sarebbe utilizzare uno sfondo semitrasparente Immagine PNG.

Puoi usare JavaScript per farlo funzionare Internet Explorer 6 se hai bisogno di.

Io uso il metodo descritto in PNG trasparenti in Internet Explorer 6.

Oltre a quello,

potresti fingere usando two side-by-side sibling elements - rendere uno semi-trasparente, poi absolutely position the other over the top?


23
2018-04-30 09:14