Opacité d'une image en background html
Taijin4
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention -
txiki Messages postés 6596 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour à tous, j'essaye de créer une page web cependant je rencontre un problème: j'aimerais gérer l'opacité de mon image en background pour que le texte par dessus, et les images que je rajouterai par la suite se voit plus, mais je n'arrive pas à trouver comment faire
Voici mon code css et html
Voici mon code css et html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/style4.css">
<link rel="stylesheet" href="css/navbar.css">
<title>HOME</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-white">
<div class="logo">
<h3>Venez nous voir</h3>
</div>
<div class="collapse navbar-collapse" id="main_navbar">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a href="home.html" class="nav-link">HOME</a></li>
<li class="nav-item"><a href="history.html" class="nav-link">HISTORY</a></li>
<li class="nav-item"><a href="prices.html" class="nav-link">PRICES</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">CONTACT</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3 class="text-center">Test pour l'opacité du fond </h3>
<p class="text-center">Lorem ipsum</p>
</div>
<div class="contact bg-white">
<div class="left">
<h3 class="text-center">CONTACT US</h3>
<div class="numero">
<img src="images/call.png">
<p>03 25 40 17 57</p>
</div>
<div class="mail">
<img src="images/mail.png">
<p>contact@gmail.com</p>
</div>
</div>
<div class="right">
<h3 class="text-center">TO FIND IT</h3>
</div>
</div>
</body>
</html>
body{
position: relative;
height: 100vh;
background: url("../images/cdv.png") fixed;
background-repeat: no-repeat;
background-size: cover;
}
.container
{
background-color: rgba(255, 255, 255, 1);
border: 2px solid black;
width: 40vw;
height: 35vh;
margin-top: 16vh;
position: relative;
margin-bottom: 16vh;
}
.container h3
{
font-weight: bold;
font-family: 'Times New Roman', Times, serif;
padding-top: 70px;
margin-bottom: 20px;
}
.container p
{
font-family: 'Times New Roman', Times, serif;
font-size: 25px;
top: 24%;
margin-bottom: 10px;
font-weight: 700;
}
A voir également:
- Opacité d'une image en background html
- Editeur html - Télécharger - HTML
- Image iso - Guide
- Légender une image - Guide
- Transformer une image en icone - Guide
- Mettre une image en filigrane sur word - Guide
3 réponses
Bonjour
Mais l'opacité c'est pour voir à travers !!
Quel intérêt pour une image en background (en fond) qui est par définition "derrière" le texte ??
Il serait plus judicieux de modifier l'image, - de contraste, + de luminosité, etc...
A+
Mais l'opacité c'est pour voir à travers !!
Quel intérêt pour une image en background (en fond) qui est par définition "derrière" le texte ??
Il serait plus judicieux de modifier l'image, - de contraste, + de luminosité, etc...
A+
Enfait je veux modifier l'opacité de l'image car quand je mets une image elle ne ressort pas assez (voir photo)
Vous devez essayer les 2, tester celui qui ne rend pas trop votre image de fond trop mauvaise...
Si vous voulez mon avis, votre image de fond est trop "envahissante", trop marquée, il faudrait trouver quelque chose de plus discret...
Ou alors vous faites de choix de mettre juste l'image en "filigrane" ou "estompé", comme ce qu'on trouve pour Wordpress, comme Hestia ou Colibri
Si vous voulez mon avis, votre image de fond est trop "envahissante", trop marquée, il faudrait trouver quelque chose de plus discret...
Ou alors vous faites de choix de mettre juste l'image en "filigrane" ou "estompé", comme ce qu'on trouve pour Wordpress, comme Hestia ou Colibri
Salut à tous,
Et pourquoi pas diminuer l'opacité de l'image de fond (ici a 100%) a 80%. Ça se fait très bien avec un éditeur d'image comme Fireworks mais il y en a d'autre. Pas ceux de Windows (Paint qui ne vaut rien).
C'est la solution la plus simple.
--
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
Et pourquoi pas diminuer l'opacité de l'image de fond (ici a 100%) a 80%. Ça se fait très bien avec un éditeur d'image comme Fireworks mais il y en a d'autre. Pas ceux de Windows (Paint qui ne vaut rien).
C'est la solution la plus simple.
--
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
