Comment afficher du texte sur une image avec HTML / CSS

Vous pouvez utiliser les méthodes de positionnement en combinaison avec la propriété margin en CSS pour positionner ou placer le texte sur une image.
 
 

Code HTML :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Afficher du texte sur une image avec HTML / CSS</title>
		<style type="text/css">
			/* Mettez le code CSS ici. */
		</style>
	</head> 
	<body>
		<div class="container">
			<img src="https://1.bp.blogspot.com/-w-wLWap_ydk/XSZZ3wSKtcI/AAAAAAAAFFY/-BWB5LvxBA0imZ8uMw-XvTmsw8k7Pk1uQCLcBGAs/s400/test1.jpg">
			<div class="text">
				<h1>Fleurs</h1>
			</div>
		</div>
	</body>
</html>

 
 

Code CSS :
.container {
    display: inline-block;
    position: relative;
}

.container .text {
    background: rgba(0, 0, 0, 0.8);
    z-index: 1;
    position: absolute;
    text-align: center;
    font-family: Georgia;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 30%;
    color: white;
    width: 70%;
}
Résultat

Fleurs

 

Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *