CSS RGBA confine/sfondo alfa doppio

Sto lavorando a un sito Web che ha implicato molta trasparenza e ho pensato di provare a crearlo interamente in RGBA e quindi a fare fallback per IE. Ho bisogno di un effetto di bordo stile "facebox", in cui il bordo esterno è arrotondato ed è meno opaco dello sfondo della scatola che circonda.CSS RGBA confine/sfondo alfa doppio

L'ultimo esempio da http://24ways.org/2009/working-with-rgba-colour sembra suggerire che è possibile, ma non riesco a farlo funzionare. Quando provo quanto segue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<title>RGBA Test</title> 
<style type='text/css'> 
    body { 
    background: #000; 
    color: #fff; 
    } 
    #container { 
    width: 700px; 
    margin: 0 auto; 
    background: rgba(255, 255, 255, 0.2); 
    border: 10px solid rgba(255, 255, 255, 0.1); 
    padding: 20px; 
    } 
    </style> 
</head> 
<body> 
    <div id='container'> 
    This should look like a facebox. 
    </div> 
</body></html>

Sembra che il fondo "si estende" sotto il bordo dell'elemento, che fa sì che i valori dei pixel per ottenere sommati. Pertanto, quando lo sfondo e il bordo sono entrambi semi-trasparenti, il bordo sarà SEMPRE più opaco dello sfondo dell'elemento. Questo è esattamente l'opposto di quello che sto cercando di ottenere, ma sembra che dovrebbe essere possibile sulla base degli esempi che ho visto.

Devo anche aggiungere che non posso usare un altro elemento all'interno del contenitore, perché userò anche un raggio di bordo sul contenitore per ottenere gli angoli arrotondati, e il webkit quadrerà gli angoli degli elementi figli se hanno uno sfondo assegnato, che significherebbe essenzialmente un bordo esterno arrotondato con contenuto quadrato.

Mi spiace non posso pubblicare un'immagine di questo ... A quanto pare non ho abbastanza rep per pubblicare un'immagine.

fonte

2010-04-12 stockli

Puoi aggiungere un link all'immagine ... o sei limitato a postare link? – alex

stockli vuole raggiungere http://media.24ways.org/2009/01/f7.png. Ho provato l'esempio di codice su 24ways e non sembra funzionare. – Haris

Sì, sfortunatamente sono limitato anche ai collegamenti. Posso provare a postarne uno in questo commento, però! Ecco: http://tinypic.com/view.php?pic=200qm90&s=5 – stockli

È possibile utilizzare la nuova proprietà background-clip: padding-box; per ottenere questo risultato. Calcola da dove dovrebbe iniziare lo sfondo all'interno di una casella. Per ulteriori dettagli ed esempi, controlla here

fonte

2011-01-29 21:17:42 linkyndy

Questa è la risposta! Grazie! – stockli

Fantastico! Ha funzionato anche per me. – petsoukos

Verificare questo in Firefox conferma ciò che descrivi - e mi ci è voluto un po 'per capire le implicazioni di questo! Avere il bordo meno trasparente non avrà alcun effetto sullo sfondo trasparente sottostante, poiché il bordo è (come dici tu) additivo.

In questo caso, si dovrà simulare l'effetto che stai dopo e lavorare con i colori più che l'alfa:

background: rgba(128, 128, 128, 0.7); 
border: 10px solid rgba(0, 0, 0, 0.1);

fonte

2010-04-12 23:36:35

Felice di non essere pazzo ... È semplicemente sorprendente che tutti i demo sembrino indicare che dovrebbe essere possibile. Safari è anche un problema sui bordi grandi con RGBA che sono quadrati, poiché anche le aree negli angoli sono additive, quindi ogni angolo ha una piccola casella quadrata nel bordo. Questo va via se usi border-radius, cosa che mi salva in questo caso. Hai ragione, però, dovrei ricorrere alle variazioni di colore per farlo. Sfortunatamente in questo caso ho un gradiente dietro il mio layout, quindi sarà molto ovvio che non funzioni abbastanza bene. Grazie per la tua risposta! – stockli

Prova questo:

#container { 
    width: 700px; 
    margin: 0 auto; 
    background: rgba(255, 255, 255, 0.2); 
    border: 10px solid rgba(255, 255, 255, 0.1); 
    padding: 20px; 

    /* and here is the fix */ 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding; 
    background-clip: padding-box; 
}

fonte

2010-10-31 06:54:27 kingjeffrey

Interessante! Sembra fantastico in Firefox (ancora meglio con -moz-border-radius), ma non funziona ancora in Safari ... Raddoppia come negli angoli, anche se il bordo è un po 'più scuro. Se si imposta un raggio di confine su di esso il raddoppio negli angoli va via, ma ha uno strano raddoppio sull'angolo interno arrotondato. Grazie per questo, però! Più vicino di prima! – stockli

CSS RGBA confine/sfondo alfa doppio

risposta

Problemi correlati