html - scalare immagine background css




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

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

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

DEMO

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.

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)






scalare   immagine   html   css   opacity  


opacity