Come posso dare uno sfondo trasparente al testo o all'immagine usando i CSS?


2283

È possibile, usando solo CSS, rendere backgroundsemi-trasparente l'elemento di un elemento ma avere il contenuto (testo e immagini) dell'elemento opaco?

Vorrei 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 soggetti all'opacità dei loro genitori, quindi opacity:1è relativo a quello opacity:0.6del genitore.


16
Purtroppo no, CSS3 sta mirando a risolverlo con il nuovo modulo colore, ti permetterebbe di specificare un valore alfa ogni volta che dichiari un colore. w3.org/TR/css3-color
meandmycode

71
In realtà, l'opacità degli elementi figlio viene moltiplicata per l'opacità dell'elemento genitore, non sovrascritta. Quindi, ad esempio, se l' popacità fosse .6e l' spanopacità fossero .5allora la vera opacità del testo nell'intervallo sarebbe 0.3.
Chharvey,

1
Immagino di sì, ma poiché è lo sfondo che è traslucido, non hai nemmeno bisogno del filtro / opacità: codepen.io/anon/pen/ksJug
Stijn Sanders

5
@chharvey cosa dovrebbe succedere se definisco opacity:.5per l' opacity:2elemento genitore e per l'elemento figlio?
Alexander

10
@Alexander, sono felice che tu abbia posto questa domanda. Matematicamente, si potrebbe sospettare che il bambino ritorni a un'opacità di 1. Tuttavia, il CSS nonopacity:2; è valido . Il valore della opacityproprietà deve essere compreso nell'intervallo compreso [0,1].
Chharvey,

Risposte:


2276

Utilizzare un'immagine PNG semitrasparente o utilizzare CSS 3:

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

Ecco un articolo di css3.info, Opacity, RGBA e compromesso (2007-06-03).


<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>


86
è possibile farlo con colori esadecimali? Ti piace #fff?
grm,

35
@grm: W3C ha preso in considerazione l'introduzione di un formato di codice esadecimale #RRGGBBAA, ma hanno deciso di non farlo (per vari motivi), quindi non possiamo.
uscirà il

95
@grm con SASS Puoi,background-color: rgba(#000, .5);
Jürgen Paul,

2
Vale la pena sottolineare che se si desidera utilizzare la trasparenza, ogni browser che supporta RGBA supporta anche HSLA , che è una mappatura dei colori molto più intuitiva. IE8 è l'unico browser pseudosignificante che non riesce a supportarlo, a parte il fatto che andare avanti e utilizzare HSL (A) per ogni colore.
iono,

19

476

In Firefox 3 e Safari 3, è possibile utilizzare RGBA come indicato da Georg Schölly .

Un trucco poco noto è che puoi usarlo anche in Internet Explorer usando il filtro 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)";
}

Ciò deriva dalla trasparenza dello sfondo CSS senza influire sugli elementi figlio, tramite RGBa e filtri .

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

Cromo-33 IE11 IE9 IE8


1
Ma non in IE8. Ho provato la nuova sintassi -ms-filter ma ancora non ha funzionato per me :(
philfreo,

5
Questo post mostra come farlo in IE8: robertnyman.com/2010/01/11/…
Slapout

14
@philfreo: se cambi il primo bit del codice di Sebastian in "background: rgb (0, 0, 0) trasparente;" ora dovrebbe funzionare in IE8. Questo mi infastidiva da un po 'di tempo!
Tom Chantler,

filtro: progid Funziona alla grande con IE 9. il colore è: trasparenza, rosso, verde, blu - tutti i valori esadecimali a due cifre.
Thorsten Niehues il

1
@AdrienBe - Ho modificato la tua risposta secondo le tue istruzioni. Sfortunatamente sono stato fuori dallo spazio di testa di questo particolare Q&A per un po 'di tempo, quindi non posso aggiungere a questa conversazione in questo momento.
user664833,

108

Questa è la soluzione migliore che ho potuto trovare, NON usando CSS 3. E funziona alla grande su Firefox, Chrome e Internet Explorer per quanto posso vedere.

Metti un contenitore dive due figli divallo stesso livello, uno per il contenuto, uno per lo sfondo. E usando CSS, ridimensiona automaticamente lo sfondo per adattarlo al contenuto e metti lo sfondo in realtà sul retro 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>


19
Ha detto "Senza separare il testo e lo sfondo in due elementi posizionati uno sopra l'altro". Grazie comunque, questa è una buona soluzione ed è utile, ma in alcuni casi vorresti che l'elemento opaco fosse figlio di quello semitrasparente.
Rolf,

Ho risposto più o meno allo stesso modo su un'altra domanda SO ma ho aggiunto una prova jsfiddle e screenshot (IE7 +), vedi qui se interessati stackoverflow.com/a/21984546/759452
Adrien,

@Gorkem Pacaci: assicurati che le proprietà dell'opacità siano "realmente" tra browser, puoi utilizzare questo frammento di codice da CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity
Adrien,

Perché non farlo con uno pseudo-elemento simile :aftered evitare il markup extra?
AndFisher,

64

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

.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 riquadro esterno:

  • uno (il "retro") che si adatta alla dimensione 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: relativeriquadro on è importante; indica al livello posteriore di adattarsi alle dimensioni del riquadro. (Se è necessario che il <p>tag sia assoluto, modificare il riquadro da a <p>a a <span>e racchiuderlo in un <p>tag di posizione assoluta .)

Il vantaggio principale che questa tecnica ha su quelli simili sopra elencati è che il riquadro non deve avere una dimensione specificata; come sopra codificato, si adatta a tutta la larghezza (layout normale degli elementi a blocchi) e solo fino al contenuto. L'elemento del riquadro esterno può essere ridimensionato come preferisci, purché sia ​​rettangolare (vale a dire che il blocco in linea funzionerà, il non in linea normale non funzionerà).

Inoltre, ti dà molta libertà per lo sfondo; sei libero di inserire qualsiasi cosa nell'elemento posteriore e di non influire sul flusso di contenuti (se desideri più sottostrati a dimensione intera, assicurati che abbiano anche la posizione: assoluta, larghezza / altezza: 100%, e in alto / in basso / a sinistra / a destra: auto).

Una variante per consentire la regolazione dell'inserzione di sfondo (tramite in alto / in basso / a sinistra / a destra) e / o il pinning di sfondo (rimuovendo una delle coppie a sinistra / a destra o in alto / in basso) è invece 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 ed 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, o scivoleranno fuori dal fondo.
  • I margini vanno sull'elemento del riquadro e il riempimento sull'elemento cont. Non usare il contrario (margini sul cont o padding nel riquadro) o scoprirai stranezze come la pagina essendo sempre leggermente più ampia della finestra del browser.
  • Come accennato, il tutto 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-block, e con entrambi autoe specifici 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 una demo live della tecnica ampiamente utilizzata:

screenshot di christmas-card-2009.slippyd.com


In quale situazione non si vorrebbe usare CSS3 per questo?
Burkely91

@ Burkely91 Se puoi farlo in CSS3, allora usalo assolutamente. Ma lo sfondo CSS3 non supporta tutti i tipi di contenuto né la flessibilità del layout completo. L'esempio di busta / lettera sopra sarebbe difficile da realizzare con CSS3 a causa dei bordi e dei riempimenti centrali che si ripetono indipendentemente. Inoltre, tieni presente che questa risposta è stata originariamente scritta 5 anni fa, prima che il supporto CSS3 fosse diffuso.
Slipp D. Thompson,

2
@Igor Ivancha Ripristina le modifiche. Mi dispiace, cambiare il rientro dalla mia forma preferita (schede) al tuo (2 spazi) non è bello. Potresti avere buone ragioni per usare il rientro a 2 spazi nei tuoi progetti di codice quotidiani, ma per la presentazione sul web credo che le schede abbiano la chiara vittoria: il rientro più profondo rende più facile discernere i livelli di gerarchia, ed è lontano convertire le schede in spazi in modo più semplice e affidabile, così come una forma più compatibile di tutti i lettori.
Slipp D. Thompson,

@Igor Ivancha Inoltre, sembra che tu abbia eseguito il codice anche se un beautifier che ha messo tutti i selettori CSS e le proprietà sulla propria riga. I miei esempi sono stati scritti con interruzioni di riga intenzionali e spaziatura per raggruppare logicamente pezzi che dovrebbero essere compresi insieme dal lettore, ad esempio la maggior parte width:e le height:proprietà condividono una linea perché sono lo stesso tipo di costrutto e meglio compresi come una forma bidimensionale, non una coppia di vincoli monodimensionali. Inoltre, alcune delle linee hanno un discreto numero in esse perché sono contenuti ripetuti che non sono poi così importanti da mostrare.
Slipp D. Thompson,

@Igor Ivancha L'organizzazione, il raggruppamento e lo stile logici sono estremamente importanti per la scrittura di codice sano e comprensibile, così come lo è per tutti i tipi di scrittura. Le modifiche che hai apportato erano l'equivalente di andare in un post di qualcuno e rimuovere tutte le interruzioni di paragrafo e inserire una nuova riga forzata dopo ogni frase. Se vuoi essere così ottuso pedante nel tuo lavoro, bene, sei libero di farlo. Ma per favore non sminuire il carattere e l'espressione semantici nel lavoro degli altri.
Slipp D. Thompson,

58

È meglio usare un semi-trasparente.png .

Basta aprire Photoshop , creare 2x2un'immagine pixel (la raccolta 1x1può causare un bug di Internet Explorer! ), Riempirlo con un colore verde e impostare l'opacità in "Scheda Livelli" al 60%. Quindi salvalo e rendilo un'immagine di sfondo:

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

Funziona alla grande, ovviamente, tranne in Internet Explorer 6 . Sono disponibili soluzioni migliori, ma ecco un trucco rapido:

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

C'è un trucco per minimizzare il markup: usa uno pseudo elemento come sfondo e puoi impostare l'opacità su di esso senza influenzare l'elemento principale e i suoi figli:

DEMO

Produzione:

Opacità di sfondo con uno pseudo elemento

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


23

Il metodo più semplice sarebbe utilizzare un'immagine PNG di sfondo semitrasparente .

È possibile utilizzare JavaScript per farlo funzionare in Internet Explorer 6, se necessario.

Uso il metodo descritto in PNG trasparenti in Internet Explorer 6 .

A parte questo, si potrebbe falso utilizzando due side-by-side elementi fratelli - make una semi-trasparente , quindi assolutamente posizionare l'altro sopra la parte superiore .


2
Tutto ciò di cui ho bisogno è un semplice colore di sfondo, quale dimensione di PNG proporresti di creare con questo colore? 1x1 renderà il rendering molto impegnativo, troppi pixel rendono questo PNG abbastanza grande (dovrebbe essere ok dimensioni del file poiché compresso, ma il rendering deve ancora decomprimerlo per usarlo) ...
Stijn Sanders

3
Consiglierei qualcosa come 30px x 30px, che usa meno memoria quando lo si ripete rispetto a un 1x1, ed è ancora abbastanza piccolo da ridurre al minimo l'utilizzo della larghezza di banda.
Chris,

21

Questo metodo consente di avere un'immagine sullo sfondo e non solo un colore solido, e può essere utilizzato per avere trasparenza su altri attributi come i bordi. Non sono necessarie immagini PNG trasparenti.

Usa :before(o :after) nei CSS e dai loro il valore di opacità per lasciare l'elemento nella sua opacità originale. Quindi puoi usare: prima di creare un elemento falso e dargli lo sfondo trasparente (o i bordi) che desideri e spostarlo dietro il contenuto con cui vuoi rimanere opaco z-index.

Un esempio ( violino ) (nota che la DIVclasse with dadserve solo a fornire un po 'di contesto e contrasto ai colori, questo elemento extra non è effettivamente necessario e il rettangolo rosso viene spostato leggermente verso il basso e verso destra per lasciare visibile lo sfondo dietro l' fancyBgelemento):

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

con questo 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;
}

In questo caso .fancyBg:beforeha le proprietà CSS che vuoi avere con la trasparenza (sfondo rosso in questo esempio, ma può essere un'immagine o bordi). È posizionato come assoluto per spostarlo indietro .fancyBg(utilizzare valori pari a zero o qualsiasi cosa sia più appropriata per le proprie esigenze).


17

Il problema è che il testo in realtà ha un'opacità completa nel tuo esempio. Ha un'opacità completa all'interno del ptag, ma il ptag è solo semi-trasparente.

È possibile aggiungere un'immagine di sfondo PNG semitrasparente invece di realizzarla in CSS o separare il testo e div in due elementi e spostare il testo sopra la casella (ad esempio, margine negativo).

Altrimenti non sarà possibile.

Proprio come ha detto Chris: se usi un file PNG con trasparenza, devi usare una soluzione JavaScript per farlo funzionare nel fastidioso Internet Explorer ...


15

Quasi tutte queste risposte presuppongono che il designer desideri uno sfondo a tinta unita. Se il designer vuole davvero una foto come sfondo, l'unica vera soluzione al momento è JavaScript come il plugin jQuery Transify menzionato altrove .

Quello che dobbiamo fare è partecipare alla discussione del gruppo di lavoro CSS e farci dare loro un attributo di opacità di fondo! Dovrebbe funzionare di pari passo con la funzione di sfondi multipli.


14

Ecco come lo faccio (potrebbe non essere ottimale, ma funziona):

Crea divquello che vuoi essere semi-trasparente. Dagli una classe / ID. Lascialo vuoto e chiudilo. Dagli un'altezza e una larghezza impostate (diciamo, 300 pixel per 300 pixel). Dagli un'opacità di 0,5 o qualsiasi cosa ti piaccia e un colore di sfondo.

Quindi, direttamente sotto quel div, crea un altro div con una diversa classe / id. Crea un paragrafo al suo interno, dove posizionerai il testo. Indica la divposizione: relativo e superiore: -295px(che è negativo 295 pixel). Dagli un indice z di 2 per buona misura e assicurati che la sua opacità sia 1. Modella il tuo paragrafo come preferisci, ma assicurati che le dimensioni siano inferiori a quella del primo in divmodo che non trabocchi.

Questo è tutto. Ecco il codice:

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

Funziona in Safari 2.x, ma non conosco Internet Explorer.


L'elemento in più può essere evitato e invece usa uno pseudo elemento come :beforeo:after
frozenkoi


11

Qualche tempo fa, ho scritto di questo in Cross Browser Background Transparency With CSS .

Stranamente Internet Explorer 6 ti permetterà di rendere trasparente lo sfondo e mantenere il testo completamente opaco. Per gli altri browser suggerisco quindi di utilizzare un file PNG trasparente.



9

Se sei un ragazzo di Photoshop , puoi anche usare:

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

O:

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

8

Per rendere lo sfondo di un elemento semi-trasparente, ma avere il contenuto (testo e immagini) dell'elemento opaco, devi scrivere il codice CSS per quell'immagine e devi aggiungere un attributo chiamato opacitycon un valore minimo.

Per esempio,

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

// Più piccolo è il valore, più sarà trasparente, più il valore sarà minore la trasparenza.


Questo è un modo per farlo nei browser moderni. Lo combino con i valori rgba come fallback
Tahir Khalid,

Si corretto. Questo è uno dei modi per gestire il browser moderno.
Pushp Singh,

Cosa intendi con "o il valore minore sarà la trasparenza" (sembra incomprensibile)? (Rispondi modificando la tua risposta , non qui nei commenti, se appropriato.)
Peter Mortensen

7

CSS 3 ha una soluzione semplice al tuo problema. Uso:

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

Qui, rgbasta per rosso, verde, blu e valore alfa. Il valore verde è ottenuto a causa di 255 e la metà della trasparenza è ottenuta con un valore alfa 0,5.


In che modo differisce da alcune risposte precedenti?
Peter Mortensen,


6

colore di sfondo: rgba (255, 0, 0, 0,5); come detto sopra è la migliore risposta in poche parole. Dire CSS 3, anche nel 2013, non è semplice perché il livello di supporto da vari browser cambia ad ogni iterazione.

Sebbene background-colorsia supportato da tutti i principali browser (non nuovi a CSS 3) [1] la trasparenza alfa può essere difficile, specialmente con Internet Explorer precedente alla versione 9 e con il colore del bordo su Safari precedente alla versione 5.1. [2]

Usando qualcosa come Compass o SASS può davvero aiutare la produzione e la compatibilità multipiattaforma.


[1] W3Schools: proprietà CSS background-color

[2] Blog di Norman: Elenco di controllo supporto browser CSS3 (ottobre 2012)


4

Puoi risolverlo per Internet Explorer 8 usando (ab) usando la sintassi del gradiente. Il formato del colore è ARGB. Se si utilizza il preprocessore Sass è possibile convertire i colori utilizzando la funzione integrata "ie-hex-str ()".

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

4

È possibile utilizzare puro CSS 3 : rgba(red, green, blue, alpha)dovealpha trova il livello di trasparenza che desideri. Non è necessario JavaScript o jQuery.

Ecco un esempio:

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

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


2

Puoi farlo rgba color codeutilizzando CSS come in questo esempio riportato di seguito.

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


1

C'è una soluzione più semplice per mettere una sovrapposizione su un'immagine sullo stesso div. Non è l'uso corretto di questo strumento. Ma funziona come un incantesimo per creare quell'overlay usando i CSS.

Usa un'ombra inserita come questa:

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

È tutto :)


1

È possibile utilizzare RGBA (red, green, blue, alpha) nel CSS . Qualcosa come questo:

Quindi semplicemente fare qualcosa del genere funzionerà nel tuo caso:

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

span {
  color: white;
}

1

Secondo il mio punto di vista, il modo migliore per utilizzare un colore di sfondo con opacità è il seguente. Se lo utilizziamo, non perderemo l'opacità per gli altri elementi, come colore di prova, bordo, ecc.

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

Usa il colore di sfondo con opacità

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

Inserisci qui la descrizione dell'immagine


0

Normalmente uso questa classe per il mio lavoro. È abbastanza buono.

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


0

Ha funzionato per me quando ho usato il formato, #AARRGGBBquindi quello che funzionava per me era #1C00ff00. Provalo, perché l'ho visto funzionare per alcuni e non per qualcun altro. Lo sto usando nei CSS.


0

È possibile utilizzare il valore di opacità aggiunto al valore esadecimale:

background-color: #11ffeeaa;

In questo esempio aaè l'opacità. Un'opacità di 00mezzi trasparenti e di ffcolori solidi.

L'opacità è facoltativa, quindi puoi utilizzare il valore esadecimale come sempre:

background-color: #11ffee;

Puoi anche usare il vecchio modo con rgba():

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

E la backgroundscorciatoia se vuoi assicurarti che lo sfondo non abbia altri stili, come immagini o sfumature:

background: #11ffeeaa;

Dalle specifiche di 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;

-2

È possibile utilizzare il colore RGB con opacità come un codice colore in RGB (63, 245, 0) e aggiungere opacità (come 63, 245, 0, 0,5) e sostituire RGB con RGBA. Adeve essere usato per l'opacità.

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.