Image CSS

Nous introduisons d'abord une image, ajoutons une description et utilisons div pour la porter

  <div class="image">
    <a href="./1348306907524.jpg" target="_self">
        <img src="1348306907524.jpg" width="150px" height="150px">
    </a>
    </div>
    <div>beautiful </div>

et nous obtenons l'effet suivant :

.

Ensuite, nous commençons à personnaliser l'affichage de l'image :

Ajoutez une bordure à l'image, modifiez la police de description pour qu'elle corresponde, modifiez la taille de la police et faites flotter l'ensemble du div vers le à gauche pour que la bordure corresponde à l'image.

.image{    border: 2px solid darkgrey;    width: auto;    height: auto;    float: left;    text-align: center;    padding: 5px;
}img{    padding: 5px;
}.text{    font-size: 20px;    margin-bottom: 5px;
}

C'est l'effet après le traitement

Après cela. on peut concevoir la transparence de l'image : C'est relativement simple, il suffit d'ajouter à l'image les paramètres CSS :

opacité : 0,5 ;

La plage de valeurs de cet attribut est 0-1 pour définir la transparence, 0 est complètement transparent. 1 représente complètement opaque.

Voici le rendu translucide :