Sujet Précédent Sujet Suivant

Opacité d'une image en background html

Fermé
Taijin4 Messages postés 5 Date d'inscription lundi 28 septembre 2020 Statut Membre Dernière intervention 6 janvier 2023 - 16 janv. 2022 à 11:13
txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 16 févr. 2022 à 16:48
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 

<!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:

3 réponses

Réponse 1 / 3
Utilisateur anonyme
16 janv. 2022 à 11:53
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+
0
Réponse 2 / 3
Taijin4 Messages postés 5 Date d'inscription lundi 28 septembre 2020 Statut Membre Dernière intervention 6 janvier 2023
16 janv. 2022 à 11:55
Enfait je veux modifier l'opacité de l'image car quand je mets une image elle ne ressort pas assez (voir photo)

0
Utilisateur anonyme
16 janv. 2022 à 12:02
Oui, j'avais compris !
0
Taijin4 Messages postés 5 Date d'inscription lundi 28 septembre 2020 Statut Membre Dernière intervention 6 janvier 2023 > Utilisateur anonyme
16 janv. 2022 à 12:04
Du coup je dois modifier le contraste ou la luminosité pour que ça fonctionne?
0
Utilisateur anonyme > Taijin4 Messages postés 5 Date d'inscription lundi 28 septembre 2020 Statut Membre Dernière intervention 6 janvier 2023
Modifié le 16 janv. 2022 à 12:29
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
0
Réponse 3 / 3
txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 520
9 févr. 2022 à 18:49
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.
0
txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 520
16 févr. 2022 à 16:48
Comme ici (ça m'a pris 3mn avec Fireworks).

Cordialement.
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse