Overlay sur image de Background

Fermé
JESUISJULES Messages postés 5 Date d'inscription lundi 26 octobre 2015 Statut Membre Dernière intervention 22 novembre 2020 - 29 avril 2020 à 12:49
JESUISJULES Messages postés 5 Date d'inscription lundi 26 octobre 2015 Statut Membre Dernière intervention 22 novembre 2020 - 29 avril 2020 à 16:36
Bonjour,

Je suis actuellement entrain de modifier un site web et depuis maintenant plus de deux heures je n'arrive pas à enlever l'overlay gris qui est sur l'image de fond du site. J'ai examiné le CSS et je ne trouve rien, peut être aurez vous plus de facilité que moi ?

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 100vh;
  background: url("../img/hero-bg.jpg") top center;
  background-size: cover;
  position: relative;
}

#hero:before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero .hero-container {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 15px;
  background: none;
}

#hero .hero-bg {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 15px;
  width: 100%;
  height: 100vh;
  background: none;
  background-size: cover;
  position: relative;
}

#hero h3 {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 26px;
  padding: 10px 30px;
  margin-bottom: 30px;
  border-radius: 50px;
}

#hero h1 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  text-transform: uppercase;
  color: #fff;
}

#hero h2 {
  color: #eee;
  margin-bottom: 40px;
  font-size: 24px;
}

#hero .btn-get-started {
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 30px 9px 30px;
  border-radius: 50px;
  transition: 0.5s;
  border: 2px solid #fff;
  color: #fff;
}

#hero .btn-get-started:hover {
  background: #e43c5c;
  border: 2px solid #e43c5c;
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

@media (max-width: 768px) {
  #hero h3 {
    font-size: 22px;
  }
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
}


Merci beaucoup



Configuration: Windows / Chrome 81.0.4044.122
A voir également:

2 réponses

Salut,
testez simplement tout les éléments graphiques.
Ils peuvent aussi être affichés en détail dans la console du navigateur et sélectionnable(et qui indiquera en cliquant dessus à quoi il correspond dans le script) soit sur l'écran soit dans la liste virtuelle du DOM(ou en cliquant sur l'élément vous mettez en évidence son affichage).
En pur solution dans le script:
Les images pour vérifier que la bande grise n'est pas dans l'image(c'est peut-être déjà fait?).
Chaque élément impliquant la couleur comme ici vos bordures.
Les éléments HTML qui peuvent avoir par défaut des valeurs de couleur grise(comme par exemple une balise HR, un bouton ou un cadre de formulaire etc...Ces derniers s'il ne sont pas remplis ressembleront à une ligne grise plus ou moins haute).

Bref ce n'est pas à nous de le faire mais à vous de regarder chaque élément à part pour trouver celui qui correspond...
Le flux du document peut-aussi vous aider, c'est l'ordre normal-sauf changement de position en les sortant du flux qui détermine cela. Donc en regardant ce qui apparaît après ou avant dans la page vous aurez déjà une piste pour savoir de quel élément il s'agit.
Quand je parle de tester cela implique de supprimer temporairement(par exemple en mettant en commentaire ou en coupant la ligne incriminée) une règle CSS et de voir ce qui change dans le navigateur(sans oublier de supprimer le cache possible).
Puis de corriger en remettant ou non le script du CSS.
Il faut rarement 2h pour faire cela, bien sûr tout dépends de la taille du code mais bon ici il y a genre 3 ou 4 lignes à tester(tout ce qui concerne les couleurs et épaisseurs soit: background, border plus le HTML évidemment comme HR ou ce qui possède un cadre -souvent gris- par défaut).
0
JESUISJULES Messages postés 5 Date d'inscription lundi 26 octobre 2015 Statut Membre Dernière intervention 22 novembre 2020
29 avril 2020 à 16:36
Merci pour votre réponse, celà dit je ne me serai pas pris la peine de poster un message ici si je n'avais pas testé toutes mes lignes... A priori la couleur qui serait affichée par dessus mon image serait #444444, en cherchant bien dans toutes mes lignes, HTML comme CSS, cette couleur n'apparait pas dans ce qui concerne mon image de fond.
Si vous le désirez je peux vous envoyer les fichiers du site afin que vous puissiez y jeter un oeil ? Il n'y a que sur ça que je bloque...
0