Le meilleur didacticiel image CSS transparent / opaque en 2024, dans ce didacticiel, vous pouvez apprendre D'autres exemples,Exemple 1 - Créer une image transparente,Exemple 2 - Transparence de l'image - hover effet,Exemple 3 - Texte de la boîte transparente,
L'utilisation de CSS est facile de créer une image transparente.
Remarque: la propriété CSS Opacitéfait partie des recommandations du W3C CSS3.
Créer une image transparente - hover effet
Créer une zone de texte a une image d'arrière - plan transparent
La transparence dans la propriété CSS3 estopacité.
Tout d'abord, nous allons vous montrer comment créer une image transparente avec CSS.
Image normale
La même image avec transparence:
Considérons le CSS suivant:
IE9, Firefox, Chrome, Opera et Safari navigateur utilise les propriétés de transparence de l'image peut devenir opaque. Opacité valeur de la propriété de 0,0 à 1,0. Des valeurs plus petites font l'élément le plus transparent.
IE8 et les versions antérieures utilisent filtre: alpha (opacity = x). X peut prendre des valeurs 0-100. Des valeurs plus faibles font l'élément le plus transparent.
Déplacez votre souris sur l'image:
CSS style:
Le premier bloc est le code CSS dans l'exemple 1, et similaires. En outre, nous avons également ajouté ce qui se passe lorsque l'utilisateur déplace les survols de la souris sur l'une des images. Dans ce cas, lorsque l'utilisateur déplace la souris sur l'image, nous espérons que l'image soit claire.
Ceci estCSS: opacité = 1.
IE8 et l'utilisation antérieure: filtre: alpha (opacity = 100 ).
Lorsque le pointeur de la souris loin de l'image, l'image sera re-transparence.
Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente. Le texte dans la zone transparente.
Le code source est la suivante:
Tout d'abord, nous créons une hauteur fixe et la largeur de l'élément div avec une image de fond et de la frontière. Ensuite, nous créons un des éléments div plus petits à l'intérieur du premier div. Cette div ont également une largeur fixe, couleur de fond, frontière - et il est transparent. A l'intérieur du div transparent, nous ajoutons un texte dans l'élément P.