html - scalare immagine background css
Come faccio a dare del testo o un'immagine uno sfondo trasparente usando i CSS? (18)
Si può fare con
rgba color code
usando css come questo esempio dato 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>
È possibile, usando solo i CSS, rendere lo background
di un elemento semi-trasparente ma avere 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 opacity:0.6
del genitore.
È possibile utilizzare il colore RGB con l'opacità come questo codice colore in RGB (63,245,0) e aggiungere l'opacità come (63,245,0,0,5) e aggiungere RGBA sostituire RGB. Un uso per l'opacità
div{
background:rgba(63,245,0,0.5);
}
C'è un trucco per minimizzare il markup: usa uno pseudo elemento come sfondo e puoi impostarne l'opacità senza influenzare l'elemento principale ei suoi figli:
Produzione:
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.
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 fare quella sovrapposizione usando i CSS.
Usa un'ombra inserita come questa:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
È tutto :)
Ecco come faccio questo (potrebbe non essere ottimale, ma funziona):
Crea il div
che vuoi essere semi-trasparente. Dagli una classe / id. Lascialo VUOTO e chiudilo. Assegnagli un'altezza e una larghezza impostate (ad esempio, 300 pixel per 300 pixel). Dagli una opacità di 0,5 o qualsiasi cosa tu voglia e un colore di sfondo.
Quindi, DIRETTAMENTE SOTTO quel div, crea un altro div con una classe / id differente. Crea un paragrafo al suo interno, dove posizionerai il tuo testo. Dare la posizione div
: relativa e superiore: -295px
(che è NEGATIVO 295 pixel). Dagli uno z-index di 2 per una buona misura, e assicurati che la sua opacità sia 1. Metti il tuo paragrafo a tuo piacimento, ma assicurati che le dimensioni siano inferiori a quelle del primo div
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 so su Internet Explorer.
Ecco un plugin jQuery che gestirà tutto per te, Transify ( Transify - un plugin jQuery per applicare facilmente trasparenza / opacità allo sfondo di un elemento ).
Stavo incontrando questo problema ogni tanto, quindi ho deciso di scrivere qualcosa che avrebbe reso la vita molto più facile. Lo script ha meno di 2 KB e richiede solo 1 riga di codice per farlo funzionare, e gestirà anche l'animazione dell'opacità dello sfondo, se lo desideri.
Il problema è che il testo in realtà ha piena opacità nel tuo esempio. Ha piena opacità all'interno del tag p
, ma il tag p
è semitrasparente.
È possibile aggiungere un'immagine di sfondo PNG semitrasparente anziché realizzarla in CSS, oppure separare il testo e div in 2 elementi e spostare il testo sopra la casella (ad esempio, margine negativo).
Altrimenti non sarà possibile.
MODIFICARE:
Proprio come ha detto Chris: se si utilizza un file PNG con trasparenza, è necessario utilizzare una soluzione alternativa JavaScript per farlo funzionare nel fastidioso Internet Explorer ...
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 viene dalla trasparenza dello sfondo CSS senza influire 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>
Per un semplice colore di sfondo semi-trasparente, le soluzioni di cui sopra (immagini CSS3 o bg) sono le migliori opzioni. Tuttavia, se vuoi fare qualcosa di più divertente (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.
La position: relative
sul riquadro è importante; indica al livello precedente di adattarsi alle dimensioni del riquadro. (Se hai bisogno che il tag <p>
sia assoluto, cambia il riquadro da <p>
a <span>
e avvolgi tutto ciò in un tag <p>
posizione assoluta.)
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-block
, e con entrambe le auto
/ specifiche width
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>
Ed ecco una demo dal vivo della tecnica utilizzata in modo estensivo:
Puoi risolvere questo per Internet Explorer 8 di (ab) usando la sintassi del gradiente. Il formato colore è ARGB. Se stai usando il preprocessore di Sass puoi convertire i colori usando la funzione built-in "ie-hex-str ()".
background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
Puoi usare puro CSS 3 : rgba(red, green, blue, alpha)
, dove alpha
è il livello di trasparenza che vuoi. Non è necessario JavaScript o jQuery.
Ecco un esempio:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
Qualche tempo fa, ho scritto su questo in Cross Browser Background Transparency With CSS .
Bizarremente Internet Explorer 6 ti permetterà di rendere lo sfondo trasparente e di mantenere il testo in cima completamente opaco. Per gli altri browser, suggerisco quindi di utilizzare un file PNG trasparente.
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>
Questo metodo consente di avere un'immagine in background e non solo un colore solido, e può essere utilizzata per avere trasparenza su altri attributi come i bordi. Non sono richieste immagini PNG trasparenti.
Usa :before
(o :after
) in CSS e dai loro il valore di opacità per lasciare l'elemento alla sua opacità originale. Quindi puoi usare: prima di creare un elemento falso e dargli lo sfondo trasparente (o i bordi) che vuoi e spostarlo dietro il contenuto che vuoi mantenere opaco con z-index
.
Un esempio ( fiddle ) (nota che il DIV
con il dad
classe è solo per fornire un contesto e un contrasto con i colori, questo elemento extra non è in realtà necessario, e il rettangolo rosso viene spostato un po 'in basso ea destra per lasciare visibile il 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 vuoi avere con trasparenza (sfondo rosso in questo esempio, ma può essere un'immagine o bordi). È posizionato in modo assoluto per spostarlo dietro .fancyBg
(usa valori pari a zero o qualunque sia più appropriato per le tue esigenze).
Se stai utilizzando Less , puoi usare fade(color, 30%)
.
Utilizza un'immagine PNG semitrasparente o usa CSS3:
background-color:rgba(255,0,0,0.5);
Ecco un articolo da css3.info, Opacity, RGBA e compromesso (2007-06-03).
È meglio usare un semi-trasparente .png
.
Basta aprire Photoshop , creare un'immagine di 2x2
pixel (il prelievo di 1x1
può causare un errore di Internet Explorer! ), Riempirlo con un colore verde e impostare l'opacità in "Livelli" al 60%. Quindi salvalo e rendilo un'immagine di sfondo:
<p style="background: url(green.png);">any text</p>
Funziona benissimo, naturalmente, tranne che nell'incantevole 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');
}
background-color: RGBA (255,0,0,0.5); come detto sopra è la migliore risposta in poche parole. Dire che usare CSS3, anche nel 2013, non è semplice perché il livello di supporto di vari browser cambia ad ogni iterazione.
Sebbene il background-color
sia supportato da tutti i principali browser (non nuovi per CSS3) [1] la trasparenza alfa può essere complicata, specialmente con Internet Explorer prima della versione 9 e con il colore del bordo su Safari precedente alla versione 5.1. [2]
Utilizzare 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 per il supporto dei browser CSS3 (ottobre 2012)