Crear una DIV con trasparencia
El elemento DIV es empleado como contenedor de bloque en HTML. Tiene como propósito dar un estilo concreto a la página web y facilitar su organización. ¿Deseas crear una DIV transparente? Tan solo tienes que utilizar una de las técnicas CSS que te enseñamos en este artículo.
Volver la DIV y su contenido transparente
Con esta línea de código la DIV y su contenido serán transparentes: imágenes y texto:
<div style="filter:alpha(opacity=50); opacity:0.5;">........</div>
La propiedad opacity es compatible con Firefox, Chrome, Safari y Opera e IE.
Volver la DIV transparente pero no su contenido
Utilizar la propiedad "rgba" de CSS
Para poner color en CSS utilizamos la función rgba():
<div style="background-color: rgba(255, 0, 0, 0.5)">………</div>
El color en este ejemplo será rojo transparente.
Nota: Esta función no es reconocida por Internet Explorer ni por Opera 9, pero sí por Opera 10.
Truco
Tomamos un DIV como contenedor de texto e imágenes. Una vez dentro hacemos otra división (vacía) y la cerramos inmediatamente. Esto permitirá volver el fondo transparente sin afectar al texto.
Veámoslo con un ejemplo:
<div style="position: relative; z-index: 10;"> <div style=" background-color: #f00; position:absolute; z-index:-1; top:0; left:0; right: 0; bottom:0; opacity:0.2;"></div> …… …… </div>
Cuando la primera DIV posee un posicionamiento relativo debemos saber que ello es para poner la z-index.
La DIV que permite la transparencia posee el posicionamiento absoluto y está a 0 px de cada borde a fin de recubrir la primera DIV. Vemos una z-index de -1 para ponerla debajo de la primera.
Foto: © Everypixel
- Div transparente
- Div transparente css - Mejores respuestas
- Transparencia css div - Mejores respuestas
- Siete líneas por transparencia y siete palabras por línea significa que - Fichas prácticas - Powerpoint
- Las imágenes en formato png no disponen de canal alfa (también llamado canal de transparencia). - Artìculos
- Como hacer una imagen transparente en paint - Fichas prácticas - Ofimática
- Mancha transparente en la pantalla del celular - Foros - Móviles y tabletas
- Cómo desactivar la transparencia en Windows 10 - Fichas prácticas - Windows 10
¡Suscríbete a nuestra Newsletter!
- Trucos para Animal Crossing: New Horizons
- Activar el nuevo diseño de Facebook
- Las mejores apps educativas
- El mapa del coronavirus
- Usar Zoom de forma segura
- Conseguir Tinder Passport gratis
- Apps para controlar la ansiedad y la depresión
- Consejos para trabajar desde casa
- Cómo limpiar y desinfectar tu teléfono
- Cómo hacer videollamadas grupales en WhatsApp