imposta un'opacità diversa per gli elementi nidificati

Voglio fare un effetto di tipo exporlor per il file win7: la barra del titolo ha una opacità inferiore a 1, mentre il contenuto non ha opacità.imposta un'opacità diversa per gli elementi nidificati

Poi cercato di combinare due elementi insieme;:

<div id="outer" style="background-color:black;opacity:0.6;padding:30px;position:absolute;width:400px;height:400px;"> 
    <div id="inner" style="background-color:gray;opacity:1;height:100%;"></div> 
</div>

voglio rendere il div#outer hanno un'opacità di 0,8, quindi effettuare la div#inner non hanno opacità (con opacità = 1).

Tuttavia sembra che questo non funziona. Poiché l'opacità di div#outer influisce su quella dello div#inner.

Qualche idea?

fonte

2013-01-14 hguser

Tuttavia sembra che questo non funzioni. Poiché l'opacità di div # outer influirà su quella del div # inner.

Corretto.

Ma se ciò che si vuole è solo uno sfondo trasparente, impostando RGBA color come background-color potesse soddisfare le esigenze. Come questo:

<div id="outer" style="background-color: rgba(0,0,0,0.6);padding:30px;position:absolute;width:400px;height:400px;"> 
    <div id="inner" style="background-color:gray;height:100%;"></div> 
</div>

Per più informazioni, leggere documenti MDN qui: https://developer.mozilla.org/en-US/docs/CSS/color

Per IE 7 supporto, credo this (usando i file di immagine di sfondo generati) è una soluzione accettabile.

fonte

2013-01-14 05:30:03

+1, ho bisogno di digitare più veloce. Inoltre è bene sottolineare che l'opacità influirà anche sul testo. –

@Rox: supporta IE7 +? – hguser

@hguser almeno non per IE 7. Ma dal momento che IE 7 supporta la trasparenza png, penso che è possibile utilizzare un png con canale alfa come immagine di sfondo. Si prega di seguire il link che ho appena aggiunto nella risposta. –

Il div interno erediterà l'opacità del suo contenitore.

Una soluzione alternativa al browser è di evitare elementi nidificati e utilizzare invece il posizionamento assoluto. È possibile vedere un esempio qui, dove l'opacità viene applicata al fondo ma il testo ha un'opacità 1: http://www.pathtosharepoint.com/Lists/May2010/calendar.aspx?CalendarDate=5%2F5%2F2010

Esempio di codice (due elementi span sono collocati fianco a fianco all'interno della campata principale, il secondo è lo sfondo che ottiene l'opacità):

<span style="position:relative;display:inline-block;width:100%;height:100%;"> 
    <span style="width:100%;height:100%;display:inline-block;text-align:center;cursor:pointer;border:1px solid Red;position:absolute;color:Red;font-weight:bold;"> 
    11:00 AM Image Capture &amp; ECM Using SharePoint 
    </span> 
    <span style="display:inline-block;width: 100%;height:100%;background-color:Red;text-align:center;border:1px solid;z-index:-1;filter:alpha(opacity=20);opacity:0.2;font-weight:bold;"> 
    11:00 AM Image Capture &amp; ECM Using SharePoint 
    </span> 
</span>

fonte

2013-01-22 18:25:27 Christophe

imposta un'opacità diversa per gli elementi nidificati

risposta

Problemi correlati