estoy usando CSS: attrubutesCómo hacer que el DIV fondo transparente solamente el uso de CSS
filter: alpha(opacity=90);opacidad: 0,9;
para hacer el DIV transparente, pero cuando agrego otro DIV dentro de este DIV lo hace transparente también.
Quiero que el DIV (de fondo) exterior solo sea transparente. Cómo ?
Fiddle: http://jsfiddle.net/uenrX/1/
La propiedad opacidad de la DIV exterior no se puede deshacer por el DIV interior. Si se quiere lograr la transparencia, utilice rgba o hsla:
div externo:
background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/
div interior:
background-color: #FFF; /* Background white, to override the background propery*/
EDITAR
Debido a que ha añadido a su pregunta filter:alpha(opacity=90) , Supongo que también quiere una solución de trabajo para (versiones anteriores de) IE. Esto debería funcionar (-ms- prefijo para las nuevas versiones de IE):
/*Padded for readability, you can write the following at one line:*/
filter: progid:DXImageTransform.Microsoft.Gradient(
GradientType=1,
startColorStr="#E6FFFFFF",
endColorStr="#E6FFFFFF");
/*Similarly: */
filter: progid:DXImageTransform.Microsoft.Gradient(
GradientType=1,
startColorStr="#E6FFFFFF",
endColorStr="#E6FFFFFF");
que he usado el filtro de gradiente, comenzando con la misma start- y end-color, de manera que el fondo no muestra un gradiente, sino una color plano El formato de color está en el formato hexadecimal ARGB. He escrito un fragmento de código JavaScript para convertir valores de opacidad con respecto a los valores de alfa-hexagonales absolutos:
var opacity = .9;
var A_ofARGB = Math.round(opacity * 255).toString(16);
if(A_ofARGB.length == 1) A_ofARGB = "0"+a_ofARGB;
else if(!A_ofARGB.length) A_ofARGB = "00";
alert(A_ofARGB);
No es posible, la opacidad es heredado por los nodos secundarios y no se puede evitar esto. Para tener solo el elemento primario transparente, debe jugar con el posicionamiento (absoluto) de los elementos y su índice z
No sé si esto ha cambiado. Pero desde mi experiencia los elementos anidados tienen una opacidad máxima igual a los padres.
que significa:
<div id="a">
<div id="b">
</div></div>
Div#a has 0.6 opacity
div#b has 1 opacity
Ha #b está dentro #a entonces es máxima opacidad es siempre igual a 0,6
Si #b tendría 0,5 opacidad. En realidad sería 0.6 * 0.5 == 0.3 opacidad
Tuve el mismo problema, esta es la solución que se me ocurrió, ¡lo cual es mucho más fácil!
Haga un poco 1px x 1px imagen transparente y guárdelo como un archivo .png.
En el CSS para su DIV, utilice este código:
background:transparent url('/images/trans-bg.png') repeat center top;
Recuerde cambiar la ruta del archivo de la imagen transparente.
Creo que esta solución funciona en todos los navegadores, excepto en IE 6, pero no he probado.
.modalBackground
{
filter: alpha(opacity=80);
opacity: 0.8;
z-index: 10000;
}
Esto no logrará el efecto deseado, y el uso indiscriminado de índices z probablemente no sea un buena idea tampoco; sin mencionar que este uso probablemente no tendrá ningún efecto. –
si el índice z no es necesario, entonces no use el atributo z-index ... simplemente use el resto del código –
, entonces el único efecto es que los valores cambian ligeramente de la situación del solicitante, pero el asker quiere que los elementos internos aparezcan opacos . Esto no logrará eso. –
background-image:url('image/img2.jpg');
background-repeat:repeat-x;
Uso alguna imagen para una imagen interna y usar esto.
Simplemente no incluya un color de fondo para ese div y será transparente.
Supongo que la operación podría estar hablando de translúcido. –
<div id="divmobile" style="position: fixed; background-color: transparent;
z-index: 1; bottom:5%; right: 0px; width: 50px; text-align:center;" class="div-mobile">
Su respuesta está un poco escasa de información ... Le sugiero que tome la [gira], lea [responda] y luego [edite] su publicación :) –
Si bien las respuestas siempre son apreciadas, esta pregunta fue hecha 5 * * años ** atrás, y ya tenía una solución aceptada. Intente evitar las preguntas "contundentes" en la parte superior proporcionándoles respuestas, a menos que la pregunta no esté ya marcada como resuelta, o haya encontrado una solución nueva y mejorada para el problema. Recuerde también proporcionar un [** contexto que rodea su código **] (https://meta.stackexchange.com/questions/114762) para ayudar a explicarlo. Consulte la documentación en [** respuestas excelentes **] (http://stackoverflow.com/help/how-to-answer) para obtener algunos consejos sobre cómo hacer que sus respuestas cuenten :) –
La respuesta corta es que no puede. Coloque el otro div fuera del div transparente. –
Pregunta relacionada: http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text –