html - colores - CSS RGBA borde/fondo alfa doble
rgba colores (3)
Probar esto en Firefox confirma lo que describe, ¡y me tomó un tiempo darme cuenta de las implicaciones de esto! Tener el borde menos transparente no tendrá ningún efecto en el fondo transparente debajo de él, porque el borde es (como usted dice) aditivo.
En cuyo caso, tendrá que simular el efecto que está buscando y trabajar con los colores más que con el alfa:
background: rgba(128, 128, 128, 0.7);
border: 10px solid rgba(0, 0, 0, 0.1);
Estoy trabajando en un sitio web con mucha transparencia involucrada, y pensé que intentaría construirlo completamente en RGBA y luego realizar fallbacks para IE. Necesito un efecto de borde estilo "facebox", donde el borde exterior está redondeado y es menos opaco que el fondo de la caja que rodea.
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 lo 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 se agreguen. 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 contrario de lo que estoy tratando de lograr, pero parece que debería ser posible basándose en los ejemplos que he visto.
También debo agregar que no puedo usar otro elemento dentro del contenedor, ya que también usaré un radio de borde en el contenedor para obtener esquinas redondeadas, y el kit de web cuadrará las esquinas de los elementos secundarios si tienen un fondo asignado, lo que significaría esencialmente un borde exterior redondeado con contenido cuadrado.
Lo siento, no puedo publicar una imagen de esto ... Aparentemente no tengo suficiente representante para publicar una imagen.
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;
}
Puedes usar el nuevo background-clip: padding-box; propiedad para poner esto en marcha. Calcula desde dónde debe comenzar el fondo dentro de un cuadro. Para más detalles y ejemplos, consulte here