Comment changer la transparence du background sans affecter le texte

juillet 11, 2019février 10, 2020 Amine KOUIS 2 Commentaires

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.

QCMs qui pourraient vous intéresser :

Comment changer la transparence du background sans affecter le texte

Code HTML :

Code CSS :

2 réflexions sur “Comment changer la transparence du background sans affecter le texte”

Laisser un commentaire Annuler la réponse

Code HTML :

Code CSS :

Vous pourrez aussi aimer

Comment ajouter l’ombre aux éléments HTML en CSS

Comment ajuster la taille d’une div à son contenu en CSS

Comment aligner un bloc DIV horizontalement avec CSS

2 réflexions sur “Comment changer la transparence du background sans affecter le texte”

Laisser un commentaire Annuler la réponse