CSS RGBA confine / sfondo alfa doppia

StackOverflow https://stackoverflow.com/questions/2626039

  •  26-09-2019
  •  | 
  •  

Domanda

Sto lavorando su un sito web che ha un sacco di trasparenza coinvolti, e io ho pensato di provare a costruirlo interamente in RGBA e poi fare fallback per IE. Ho bisogno di un effetto "Facebox" stile di bordo, dove il confine esterno è arrotondato ed è meno opaca dello sfondo del box circonda.

L'ultimo esempio da http://24ways.org/2009/working-with- RGBA-colore sembra suggerire che è possibile, ma io non riesco a farlo funzionare. Quando provo il seguente: 

<!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 "estende" sotto il bordo dell'elemento, che fa sì che i valori dei pixel per ottenere sommati. Così, quando sia il fondo e il confine sono semi-trasparenti, il bordo sarà sempre più opaco sfondo dell'elemento. Questo è esattamente il contrario di quello che sto cercando di raggiungere, ma sembra che dovrebbe essere possibile sulla base degli esempi che ho visto.

Vorrei anche aggiungere che non posso usare un altro elemento all'interno del contenitore, perché ho anche intenzione di utilizzare un border-radius sul contenitore per ottenere angoli arrotondati, e le piazze WebKit agli angoli degli elementi figlio se avere un background assegnato, il che significherebbe essenzialmente un bordo esterno arrotondato con contenuti quadrati.

Mi dispiace non può inviare un'immagine di questo ... A quanto pare non ho abbastanza rep di inviare un'immagine.

È stato utile?

Soluzione

È possibile utilizzare la nuova proprietà background-clip: padding-box; per ottenere questo andare. Si calcola dove dal fondo dovrebbe iniziare all'interno di una scatola. Per maggiori dettagli ed esempi, controllare href="http://css-tricks.com/transparent-borders-with-background-clip/" qui

Altri suggerimenti

Test questo conferma Firefox ciò che si descrive - e mi c'è voluto un po 'di tempo a capire le implicazioni di questo! Avere il confine meno trasparente non avrà alcun effetto sullo sfondo trasparente sotto di essa, perché il confine è (come dici tu) additivo.

In questo caso, si dovrà simulare l'effetto che stai dopo e il lavoro con i colori più rispetto alla alpha: 

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

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;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top