CSS RGBA border/background alpha double

Estoy trabajando en un sitio web que tiene mucha transparencia, y pensé que intentaría construirlo completamente en RGBA y luego realizar repliegues para IE. Necesito un efecto de borde de estilo "facebox", donde el borde exterior se redondea y es menos opaco que el fondo de la caja que rodea.CSS RGBA border/background alpha double

El último ejemplo de http://24ways.org/2009/working-with-rgba-colour parece sugerir que es posible, pero parece que no puedo hacerlo funcionar. 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 ser añadido juntos. Por lo tanto, cuando tanto el fondo como el borde son semitransparentes, el borde SIEMPRE será más opaco que el fondo del elemento. Esto es exactamente lo opuesto a lo que intento lograr, pero parece que debería ser posible según los ejemplos que he visto.

También debo agregar que no puedo usar otro elemento dentro del contenedor, porque también voy a usar un radio de borde en el contenedor para obtener esquinas redondeadas, y webkit cuadra las esquinas de los elementos secundarios si tienen un fondo asignado, que esencialmente significa un borde exterior redondeado con contenido cuadrado.

Lo siento, no puedo publicar una imagen de esto ... Aparentemente no tengo suficientes representantes para publicar una imagen.

Fuente

2010-04-12 stockli

¿Puede agregar un enlace a la imagen ... o está limitado a publicar enlaces? – alex

stockli quiere lograr http://media.24ways.org/2009/01/f7.png. Intenté el ejemplo de código en 24ways y parece que no funciona. – Haris

Sí, desafortunadamente también estoy limitado con enlaces. ¡Puedo intentar publicar uno en este comentario, sin embargo! Aquí va: http://tinypic.com/view.php?pic=200qm90&s=5 – stockli

Usted puede utilizar la nueva propiedad background-clip: padding-box; para poner esto en marcha. Calcula desde dónde debería comenzar el fondo dentro de un cuadro. Para obtener más detalles y ejemplos, marque here

Fuente

2011-01-29 21:17:42 linkyndy

¡Esa es la respuesta! ¡Gracias! – stockli

¡Impresionante! A mi también me sirvió. – petsoukos

Probar esto en Firefox confirma lo que describes, ¡y me tomó un poco de tiempo darme cuenta de las implicaciones de esto! Tener el borde menos transparente no tendrá ningún efecto sobre el fondo transparente debajo de él, porque el borde es (como dices) aditivo.

En cuyo caso, usted tiene que simular el efecto que está buscando y trabajar con los colores más que el alfa:

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

Fuente

2010-04-12 23:36:35

Me alegra oír que no estoy loco ... Es sorprendente que todas las demostraciones parezcan implicar que debería ser posible. Safari también es un problema en las fronteras grandes con RGBA que son cuadradas, ya que las áreas en las esquinas también son aditivas, por lo que cada esquina tiene una pequeña caja cuadrada en el borde. Esto desaparece si usa border-radius, lo que me salva en este caso. Tienes razón, sin embargo, tendría que recurrir a variaciones de color para hacerlo. Desafortunadamente en este caso tengo un gradiente detrás de mi diseño, por lo que será muy obvio que no está funcionando del todo bien. ¡Gracias por tu respuesta! – stockli

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; 
}

Fuente

2010-10-31 06:54:27 kingjeffrey

¡Interesante! Se ve muy bien en Firefox (incluso mejor con -moz-border-radius), pero todavía no funciona en Safari ... Se está doblando como antes en las esquinas, aunque el borde es un poco más oscuro. Si establece un radio de borde en él, el doblamiento en las esquinas se va, pero tiene un extraño doblamiento en la esquina interior redondeada. ¡Gracias por esto, sin embargo! Más cerca que antes! – stockli

CSS RGBA border/background alpha double

Respuesta

Cuestiones relacionadas