Introduction
Dans ce laboratoire, nous allons plonger dans le monde de la programmation CSS. Le but de ce laboratoire est de vous aider à mieux comprendre CSS et son rôle dans le développement web. Vous allez apprendre à styliser les éléments HTML, à appliquer différents types de sélecteurs CSS et à créer des maquettes responsives avec CSS.
Image With Text Overlay
index.html et style.css ont déjà été fournis dans la machine virtuelle.
Pour afficher une image avec un texte superposé, utilisez les éléments <figure> et <figcaption>. Utilisez la propriété linear-gradient en CSS pour créer l'effet de superposition sur l'image. Voici un extrait de code d'exemple :
<figure class="text-overlay-image">
<img src="https://picsum.photos/id/971/400/400.jpg" />
<figcaption>
<h3>Business <br />Pricing</h3>
</figcaption>
</figure>
.text-overlay-image {
box-sizing: border-box;
position: relative;
margin: 8px;
max-width: 400px;
max-height: 400px;
width: 100%;
}
.text-overlay-image figcaption {
box-sizing: border-box;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%);
color: #fff;
padding: 16px;
font: 700 28px/1.2 sans-serif;
}
.text-overlay-image figcaption h3 {
margin: 0;
}
Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.
Summary
Félicitations! Vous avez terminé le laboratoire Image With Text Overlay. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.