El mejor tutorial de CSS imagen transparente / opaco en 2024. En este tutorial podrás aprender más ejemplos,Ejemplo 1 - Crear una imagen transparente,Ejemplo 2 - Transparencia imagen - coloque el efecto,Ejemplo 3 - Transparente cuadro de texto,
El uso de CSS es fácil crear una imagen transparente.
Nota: la propiedad CSS opacidades parte de las recomendaciones del W3C CSS3.
Crear una imagen transparente - coloque el efecto
Crear un cuadro de texto tiene una imagen de fondo transparente
La transparencia en la propiedad de CSS3 esla opacidad.
En primer lugar, vamos a mostrar cómo crear una imagen transparente con CSS.
imagen normal
La misma imagen con la transparencia:
Considere el siguiente CSS:
IE9, Firefox, Chrome, el navegador Opera, y Safari utiliza las propiedades de transparencia de la imagen puede ser opaco. valor de la propiedad de opacidad con 0.0 - 1.0. Los valores más bajos hacen que el elemento más transparente.
IE8 y versiones anteriores utilizan filtro: alfa (opacidad = x). X puede tomar valores de 0 - 100. Los valores más bajos hacen que el elemento más transparente.
Mover el puntero del ratón sobre la imagen:
estilo CSS:
El primer bloque es el código CSS en el Ejemplo 1, y similares. Además, también hemos añadido lo que sucede cuando el usuario mueve los elementos emergentes del ratón sobre una de las imágenes. En este caso, cuando el usuario mueve el puntero del ratón sobre la imagen, esperamos que la imagen sea clara.
Se trata deCSS: opacidad = 1.
IE8 yuso anterior: filtro: alfa (opacidad = 100 ).
Cuando el puntero del ratón fuera de la imagen, la imagen será re-transparencia.
El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente.
El código fuente es el siguiente:
En primer lugar, creamos una altura fija y ancho del elemento div una imagen de fondo y la frontera con. Entonces se crea una más pequeños elementos div dentro de la primera div. Esta div también tienen una anchura fija, color de fondo, frontera - y es transparente. En el interior del div transparente, añadimos un poco de texto en el interior del elemento P.