Image CSS transparente/opaque
Images CSSTransparent/Opaque
Il est facile de créer des images transparentes en utilisant CSS.
REMARQUE ?: La propriété CSS Opacity fait partie des recommandations CSS3 du W3C.
Exemple 1 - Création d'une image transparente
La propriété de transparence en CSS3 est opacité.
Tout d'abord, nous allons vous montrer comment créer une image transparente avec CSS.
Image normale
Même image avec transparence?:
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>Exécutez le programme et voyez
Regardez le CSS suivant?:
{
opacity:0.4;
filtre?: alpha(opacity=40); /* Pour IE8 et versions antérieures */
}
Les navigateurs Firefox, Chrome, Opera et Safari peuvent utiliser l'attribut de transparence pour l'image. devient opaque. Les valeurs de l'attribut d'opacité vont de 0,0 à 1,0. Des valeurs plus petites rendent l'élément plus transparent.
IE8 et les versions antérieures utilisent le filtre : alpha (opacity= x). Les valeurs que x peut prendre sont comprises entre 0 et 100. Des valeurs inférieures rendent l'élément plus transparent.
Exemple 2 - Transparence de l'image - Effet de survol
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>Style CSS?:
{
opacity:0.4;
filter:alpha(opacity=40); /* Pour IE8 et versions antérieures */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* Pour IE8 et versions antérieures */
}
Le premier bloc CSS est similaire au code de l'exemple 1. De plus, nous avons ajouté ce qui se passe lorsque l'utilisateur survole l'une des images. Dans ce cas, nous voulons que l’image soit claire lorsque l’utilisateur la survole.
Ce CSS est?: opacity=1.
IE8 et versions antérieures?: filter:alpha(opacity=100).
Lorsque le pointeur de la souris s'éloigne de l'image, l'image retrouvera sa transparence.
Exemple 3 - Texte dans une bo?te transparente
Le texte est dans une bo?te transparente. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes. Les textes sont dans des cases transparentes.
Le code source est le suivant?:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div.background
{
width:500px;
height:250px;
background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color: #fcffe0;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>人生就像一張紙，行走間，如素箋染墨。每一次經(jīng)歷都是一筆濃墨或淡彩;每一次成功或挫折，每一次心跳都是一個(gè)不同凡響的音符，淡然或張狂，如那枝上的鳥(niǎo)兒，可以自由戀愛(ài)，傾心歡唱，即使這素淡的冬日，也有余韻繞梁……
</p>
</div>
</div>
</body>
</html>Exécutez le programme et essayez-le
