CSS RGBA frontera / fondo doble alfa

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

  •  26-09-2019
  •  | 
  •  

Pregunta

Estoy trabajando en un sitio web que tiene mucha transparencia involucrados, y pensé que iba a tratar de construir por completo en RGBA y luego hacer retrocesos para IE. Necesito un efecto borde de estilo "facebox", donde el borde externo es redondeado y es menos opaco que el fondo de la caja que rodea.

El último ejemplo de http://24ways.org/2009/working-with- RGBA color parece sugerir que es posible, pero me parece que no puede conseguir que funcione. Cuando intento el siguiente: 

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

Parece que el fondo "se extiende" por debajo del borde del elemento, lo que hace que los valores de los píxeles para conseguir sumarse. Por lo tanto, cuando tanto el fondo y la frontera son semitransparentes, la frontera siempre será más opaco que el fondo del elemento. Esto es exactamente lo contrario de lo que estoy tratando de lograr, pero parece que debería ser posible en base a los ejemplos que he visto.

También me gustaría añadir que no puedo usar otro elemento en el interior del contenedor, porque yo también voy a utilizar una frontera de radio en el envase para conseguir esquinas redondeadas, y los cuadrados webkit las esquinas de los elementos secundarios si tener un fondo asignado, lo que significaría esencialmente un borde exterior redondeado con contenidos cuadrados.

Lo siento, no puede publicar una imagen de este ... Al parecer no tengo representante suficiente para publicar una imagen.

¿Fue útil?

Solución

Se puede utilizar la nueva propiedad background-clip: padding-box; para conseguir este ir. Se calcula a partir de donde debe comenzar el fondo dentro de una caja. Para más detalles y ejemplos, consulte href="http://css-tricks.com/transparent-borders-with-background-clip/" aquí

Otros consejos

Pruebas de esto en Firefox confirma lo que usted describe - y me tomó un poco de tiempo para darse cuenta de las implicaciones de esto! Tener la frontera menos transparente no tendrá ningún efecto sobre el fondo transparente debajo de ella, porque la frontera es (como se dice) aditivo.

En cuyo caso, usted tendrá que simular el efecto que está buscando y el trabajo con los colores más de la alfa: 

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

Prueba esto: 

#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;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top