Crear un DIV transparente

Un webmaster puede utilizar la propiedad de opacidad de imagen CSS para crear un div transparente. Con CSS, hacer un div transparente es fácil. Hay varias técnicas CSS que pueden ser usadas para hacer un div transparente. Un div transparente puede ser creado con o sin contenido. Cuando un div se hace transparente con el contenido, las imágenes y el texto también se hacen transparentes junto con el div. En caso de que el div se haga transparente sin contenido, el div solo será transparente. Es sencillo crear un div transparente con CSS pero las versiones de los navegadores que no soportan la propiedad opacidad no mostrarán el efecto.

El DIV transparente en CSS

Para crear un DIV transparente, puede utilizar las técnicas de CSS que se enumeran a continuación:

Crear un DIV transparente (con el contenido)

El div en sí mismo será transparente, pero lo mismo se aplica a todos los demás contenidos como imágenes o texto.

<div style="filter:alpha(opacity=50); opacity:0.5;">.

……………………………………………………………………………………………………………………………………………………………………..

La propiedad de opacidad se tiene en cuenta en firefox 3+, Chrome 2+, Safari 4 y Opera 10.

El filtro:alpha(opacidad=50) permite a Internet Explorer 8 y Opera 9.x hacer el contenido transparente.

Crear DIV transparente (sin el contenido)

Utilice la propiedad CSS: “rgba”

Para añadir color en CSS, utilice la propiedad rgb (). Pronto estará disponible la función rgba(). La “a” es por la transparencia:

<style="background-color: rgba(255, 0, 0, 0, 0.5)">............</div>

Aquí, el color rojo será transparente.
Esta función no es reconocida por Internet Explorer o Opera 9.x (funciona con Opera 10).

CCM es un sitio web tecnológico líder a nivel internacional. Nuestro contenido está escrito en colaboración con expertos en TI, bajo la dirección de Jeff Pillou, fundador de CCM.net. CCM alcanza a más de 50 millones de visitantes únicos por mes y está disponible en 11 idiomas.

Conozca más sobre el equipo del MCP

Relacionado

Publicado por jad05. Última actualización el 14 de mayo de 2013 a las 06:25 AM por deri58.

Este documento, titulado “Create a transparent DIV”, está disponible bajo la licencia Creative Commons. Cualquier copia, reutilización o modificación del contenido debe ser acreditada suficientemente a CCM (https://ccm.net/).

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *