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 supprimer l’espace blanc sous une image avec CSS

Comment créer un lien avec un bouton HTML

Comment ajouter l’ombre sur un texte en CSS

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

Laisser un commentaire Annuler la réponse