CSS Crear un div transparente

¿Hay alguna manera de hacer que un elemento HTML div sea medio transparente?CSS Crear un div transparente

2011-02-13 Bogdan Verbenets

Una desventaja de los recipientes translúcidos - todo el contenido del div, como texto, imágenes, etc, también será translúcida. Te recomiendo que coloques otro contenedor encima de este con cualquier contenido dentro. Por supuesto, si no estás poniendo nada dentro del div, entonces eres bueno. –

¿Utiliza un archivo PNG de fondo que es medio transparente, y esperando que no tenga que soportar IE6?

Fuente

2011-02-13 00:53:45 user268396

Estoy un poco confundido. ¿Se usaría la imagen de fondo como fondo para el div, o se colocaría en la parte superior del div de alguna manera? –

Con CSS, esta es la solución de cruz navegador

div { 
    opacity: 0.5; 
    filter: alpha(opacity = 0.5); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); 
}

Fuente

2011-02-13 00:55:07 jcubic

Mejor que mi idea, por mucho. – user268396

Esto funciona con todos los navegadores

div { 
-khtml-opacity:.50; 
-moz-opacity:.50; 
-ms-filter:”alpha(opacity=50)”; 
    filter:alpha(opacity=50); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); 
    opacity:.50; 
}

Si no desea que la transparencia para afectar a todo el recipiente y su hijos, comprobar este solución http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Fuente

2011-02-13 01:19:24 Hussein

En realidad, descubrí que, de hecho, todo el contenido se vuelve transparente, mientras que solo quiero que el fondo sea transparente. Tengo marcas, como el:

¿Hay una manera de hacer que el texto no es transparente? El artículo al que se hace referencia contiene un posicionamiento absoluto y utiliza contenedores hermanos, pero no puedo cambiar el marcado de hipertexto. –

Usar el posicionamiento relativo para el contenedor interno y el posicionamiento absoluto para el contenedor externo como se sugiere en el adjunto es la única manera de que pueda hacer un fondo transparente sin afectar el texto interno; de lo contrario, tendrá que usar una imagen transparente. – Hussein

Si solo desea el fondo de su div semitransparente, no cualquier texto y elementos dentro de él, simplemente puede establecer un color de fondo en uno transparente (es decir con alpha < 1).

Un ejemplo está en our website, un ejemplo minimizada aquí:

<html> 
<head> 
    <title>Transparency test</title> 
    <style type="text/css"> 
    body { 
     background-image: url(http://www.fencing-game.de/style/background6.png); 
    } 
    #trans { 
     background-color: rgba(255,0,0,0.5); 
     max-width: 80ex; 
    } 
    p { 
    max-width: 70ex; 
    margin: auto; 
    } 
    #nontrans { 
     background-color: rgb(255,255, 0); 
    } 
    </style> 
</head> 
<body> 
    <div id="trans"> 
    <p>normal text</p> 
    <p id="nontrans">nontransparent</p> 
    <p>normal text</p> 
    </div> 
</body>

Fuente

2011-03-15 18:07:14

No vale la pena que esta técnica no funcione para IE6, IE7 e IE8. Aquí hay un truco para eso: http://dimox.net/cross-browser-rgba-support/ – soulkphp

Respuesta

Cuestiones relacionadas