Come faccio a dare un testo o un'immagine di sfondo trasparente con i CSS?
https://stackoverflow.com/questions/806000
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
È possibile, utilizzando i CSS solo, per rendere il background di un elemento semi-trasparenti, ma il contenuto (testo e immagini) dell'elemento opaco?
Mi piacerebbe realizzare questo senza che il testo e lo sfondo come due elementi separati.
Quando si cerca:
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 del bambino sono sottoposti per l'opacità dei loro genitori, così opacity:1 è relativo alla opacity:0.6 del genitore.
Soluzione
Utilizza un'immagine PNG semitrasparente o usa CSS3:
background-color:rgba(255,0,0,0.5);
Ecco un articolo di css3.info, Opacità, RGBA e compromesso (2007-06-03).
<p style="background-color:rgba(255,0,0,0.5);">
<span>Hello world</span>
</p>
Altri suggerimenti
In Firefox 3 e Safari 3, puoi usare RGBA come Georg Sch & # 246; citato da ultimo .
Un trucco poco noto è che puoi usarlo in Internet & nbsp; Explorer e anche 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)";
}
Questo è da Trasparenza di sfondo CSS senza influire sugli elementi figlio, tramite RGBa e filtri .
Prova dei risultati delle schermate:
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>
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.
Inserisci un DIV contenitore e due DIV secondari nello stesso livello, uno per il contenuto, uno per lo sfondo. E usando CSS, ridimensiona automaticamente lo sfondo per adattarlo al contenuto e mettilo sullo sfondo in realtà 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>
Per un semplice semi-trasparente colore di sfondo, le soluzioni di cui sopra (e CSS3 bg immagini) sono le migliori opzioni.Tuttavia, se si vuole fare qualcosa di più elaborato (ad es.animazione, più sfondi, etc.), o se non si vuole fare affidamento su CSS3, si può provare il riquadro “tecnica”:
.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 del riquadro esterno elemento:
- uno (“indietro”) che si adatta la dimensione del riquadro elemento senza alterare il flusso di contenuti,
- e uno (“cont”) che contiene il contenuto e consente di determinare la dimensione del riquadro.
Il position: relative nel riquadro è importante;si dice a livello posteriore per adattarsi al riquadro di dimensioni.(Se avete bisogno di la <p> tag assoluto, modificare il riquadro di un <p> per un <span> e avvolgere il tutto in un assolutamente-posizione <p> tag.)
Il vantaggio principale di questa tecnica è più simile a quelle sopra elencate è che il riquadro non deve essere una dimensione specificata;come codificato sopra, si adatta a larghezza piena (normale blocco-layout dell'elemento) e solo come alto come il contenuto.L'esterno del riquadro elemento può essere dimensionati in qualche modo si, per favore, come è rettangolare (es.inline-block di lavoro;plain old inline non).
Inoltre, ti dà un sacco di libertà per lo sfondo;sei libero di mettere davvero nulla in l'elemento posteriore e farla non influenzano il flusso di contenuti (se si desidera che più full-size sub-strati, basta assicurarsi che essi hanno inoltre la posizione:assoluto, larghezza/altezza:100%, e in alto/in basso/a sinistra/a destra:auto).
Una variazione per consentire sfondo inserto di regolazione (via alto/in basso/a sinistra/a destra) e/o di sfondo pinning (tramite la rimozione di uno di destra/sinistra e alto/basso a coppie) è utilizzare il seguente CSS invece:
.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, anche se IE7 e IE6 richiedono extra CSS e le espressioni, IIRC, e l'ultima volta che ho controllato, la seconda CSS variazione non funziona in Opera.
Cose da guardare fuori per:
- Elementi flottanti all'interno del cont strato non sarà contenuta.Avrai bisogno di assicurarsi che essi sono cancellato o altrimenti contenute, o si rischia di scivolare fuori del fondo.
- I margini di andare sul riquadro elemento e imbottitura va in cont elemento.Non utilizzare il contrario (margini sul cont o imbottitura sul riquadro) o scoprirete stranezze come la pagina è sempre leggermente più ampia rispetto alla finestra del browser.
- Come detto, il tutto deve essere il blocco o inline-block.Sentitevi liberi di utilizzare
<div>invece di<span>s per semplificare il vostro CSS.
Una più piena demo, mostrando la flessibilità di questa tecnica utilizzando in tandem con display: inline-block, e con entrambi auto & specifiche 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 un live demo la tecnica utilizzata ampiamente:
È meglio usare un semitrasparente .png .
Basta aprire Photoshop , creare un'immagine 2x2 pixel ( la raccolta 1x1 può causare un Internet & nbsp; bug Explorer! ), riempilo con un colore verde e imposta l'opacità in " Scheda Layer " al 60%. Quindi salvalo e rendilo un'immagine di sfondo:
<p style="background: url(green.png);">any text</p>
Funziona alla grande, ovviamente, tranne che nell'adorabile Internet & nbsp; Explorer & nbsp; 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');
}
Esiste un trucco per ridurre al minimo il markup: utilizzare uno pseudo elemento come sfondo e puoi impostare l'opacità su di esso senza influire sull'elemento principale e sui suoi figli:
Output:
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 & nbsp; Explorer & nbsp; 8 e versioni successive .
Il metodo più semplice sarebbe quello di utilizzare uno sfondo semi-trasparente Immagine PNG .
Puoi usare JavaScript per farlo funzionare in Internet Explorer 6 se necessario.
Uso il metodo descritto in PNG trasparenti in Internet Explorer 6 .
A parte quello,
potresti falsificarlo utilizzando two side-by-side sibling elements - rendi uno semitrasparente , quindi absolutely position the other over the top?
Questo metodo ti consente di avere un'immagine sullo sfondo e non solo un colore solido, e può essere usato per avere trasparenza su altri attributi come i bordi. Non sono richieste 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 che vuoi mantenere opaco con z-index.
Un esempio ( fiddle ) (nota che il DIV con classe dad è solo per 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'elemento 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>
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:before ha le proprietà CSS che si desidera avere con la trasparenza (sfondo rosso in questo esempio, ma può essere un'immagine o bordi). È posizionato come assoluto per spostarlo indietro .fancyBg (usa valori pari a zero o qualsiasi cosa sia più appropriata per le tue esigenze).
Il problema è che il testo ha effettivamente una completa opacità nel tuo esempio. Ha un'opacità completa all'interno del tag p, ma il tag <=> è solo semi-trasparente.
È possibile aggiungere un'immagine di sfondo PNG semitrasparente invece di realizzarla in CSS o separare il testo e div in 2 elementi e spostare il testo sopra la casella (ad esempio, margine negativo).
Altrimenti non sarà possibile.
EDIT:
Proprio come ha detto Chris: se usi un file PNG con trasparenza, devi usare una soluzione JavaScript per farlo funzionare nel fastidioso Internet Explorer ...
Quasi tutte queste risposte presuppongono che il designer desideri uno sfondo a tinta unita. Se il designer vuole davvero una foto come sfondo, al momento l'unica vera soluzione è 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.
Ecco come lo faccio (potrebbe non essere ottimale, ma funziona):
Crea il div che vuoi essere semitrasparente. 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 QUI SOTTO quel div, crea un altro div con una diversa classe / id. Crea un paragrafo al suo interno, dove posizionerai il testo. Indica la posizione -295px: relativa e in alto: <=> (ovvero NEGATIVO 295 pixel). Dagli un indice z di 2 per buona misura e assicurati che l'opacità sia 1. Modella il tuo paragrafo come preferisci, ma assicurati che le dimensioni siano inferiori a quelle del primo <=> in modo 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, non conosco Internet & nbsp; Explorer.
Ecco un plugin jQuery che gestirà tutto per te, Transify ( Transify - un plugin jQuery per applicare facilmente trasparenza / opacità a un elemento & # 8217; s background ) .
Di tanto in tanto mi imbattevo in questo problema, quindi ho deciso di scrivere qualcosa che avrebbe reso la vita molto più semplice. Lo script è inferiore a 2 & Nbsp; KB e richiede solo 1 riga di codice per farlo funzionare e gestirà anche l'animazione dell'opacità dello sfondo, se lo desideri.
Opacità dello sfondo, ma non del testo ha alcune idee. Utilizzare un'immagine semi-trasparente o sovrapporre un elemento aggiuntivo.
Qualche tempo fa, ne ho scritto in Trasparenza sfondo browser trasversale con CSS .
Bizarrely 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.
Se sei un Photoshop , puoi anche utilizzare:
#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**
}
Al fine di rendere lo sfondo di un elemento semi-trasparenti, ma il contenuto (testo e immagini) dell'elemento opaco.È necessario scrivere il codice css per l'immagine e per aggiungere un attributo chiamato opacità con valore minimo.ad es.
.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}
// minore è il valore, maggiore sarà la trasparenza, ore il valore minore sarà la trasparenza.
background-color: rgba (255,0,0,0,5); come menzionato sopra è la migliore risposta semplicemente. Dire CSS3, anche nel 2013, non è semplice perché il livello di supporto da vari browser cambia ad ogni iterazione.
Mentre background-color è supportato da tutti i principali browser (non nuovi a CSS3) [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]
Utilizzo di 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)
CSS3 ha una soluzione semplice al tuo problema. Usa:
background-color:rgba(0,255,0,0.5);
Qui, rgba sta per rosso, verde, blu e valore alfa. Il valore verde si ottiene a causa di 255 e la metà della trasparenza si ottiene per 0,5 valore alfa.
Se stai utilizzando Less , puoi utilizzare fade(color, 30%).
Puoi risolverlo per Internet & nbsp; Explorer & nbsp; 8 da (ab) utilizzando la sintassi del gradiente. Il formato del colore è ARGB. Se stai usando il preprocessore Sass puoi convertire i colori usando la funzione integrata " ie-hex-str () quot &;.
background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
Puoi usare CSS & nbsp; 3 : rgba(red, green, blue, alpha), dove alpha è il livello di trasparenza desiderato. Non è necessario JavaScript o jQuery.
Ecco un esempio:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
<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>
Esiste una soluzione più semplice per posizionare un overlay su un'immagine sullo stesso div. Non è l'uso corretto di questo strumento. Ma funziona come un incantesimo per creare quell'overlay usando CSS.
Usa un'ombra inserita come questa:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
Questo è tutto :)
Puoi utilizzare RGBA (red, green, blue, alpha) nel CSS , qualcosa del genere:
Quindi fai semplicemente una cosa del genere funzionerà nel tuo caso:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
Puoi usare
rgba color codeusando css come questo esempio qui sotto.
.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>
Normalmente uso questa classe per il mio lavoro. È abbastanza buono.
.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 */
}
Secondo il mio punto di vista il modo migliore di usare il colore di sfondo con opacità se lo utilizziamo, non perderemo l'opacità per gli altri elementi come il colore di prova, il bordo ecc.
background-color: rgba(71,158,0,0.8);
Usa il colore di sfondo con opacità
background-color: RGBA (R, G, B, opacità);
È possibile utilizzare il colore RGB con opacità come questo codice colore in RGB (63.245,0) e aggiungere opacità come (63.245,0,0,5) e anche aggiungere RGBA per sostituire RGB. Un uso per l'opacità
div{
background:rgba(63,245,0,0.5);
}
