Comment changer la transparence du background sans affecter le texte

La propriété background-opacity, ne peut être utilisée que pour modifier l’opacité ou la transparence de l’arrière-plan d’un élément sans affecter les sous éléments. Par contre, si vous essayez d’utiliser la propriété opacity, elle ne modifie pas uniquement l’opacité de l’arrière-plan, mais modifie également l’opacité de tous les sous éléments.
 
 
Dans ce cas, vous pouvez utiliser la couleur RGBA introduite dans CSS3, qui inclut la transparence alpha dans la valeur du couleur. En utilisant la couleur RGBA, vous pouvez définir la couleur de l’arrière-plan ainsi que sa transparence.
 

Code HTML :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Comment changer la transparence du background</title>
		<style type="text/css">
			/* Mettez le code css ici. */
		</style>
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</body>
</html>

 
 

Code CSS :
body {
    background-image: url("https://1.bp.blogspot.com/-Nsnco7YChPs/XSeK8GxnkTI/AAAAAAAAFFk/OUsw-2DDcw0hbw8HA0wPluK89_v0kVlEQCLcBGAs/s1600/background.jpg");
}

p {
    padding: 30px;
    color: #fff;
    font: 18px Georgia;
    background: rgba(0, 0, 0, 0.7);
}
Résultat

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Partagez cet article

Laisser un commentaire

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