自动完成白色背景在 CSS 中不起作用

Question

我想要一个白色背景，用户可以在自动完成中选择一个项目，但是我的标题图像不断重复。

这是我的问题的图片

正如你所看到的，我用蓝色突出显示了每条建议。不过，我得到每个建议的背景图像，而不是简单的白色背景。

这是我的html

<header>

    <h1>

        <a href="/">

            <span class="texte-cache">Sel gras</span>

        </a>

    </h1>

    <section class="section-recherche">

        <?php

        // define variables and set to empty values

        $rechercheErr = "";

        $recherche  = "";

        $rechercheValid = false;

        ?>

        <form method="get" action="../pages/recherche.php">

            <label for="recherche" class="lblRechercher">Rechercher</label>

            <div class="recherche">

                <input type="search" name="recherche" id="recherche" placeholder="Rechercher..." value="<?php echo $recherche; ?>" />

                <span class="error"> <?php echo $rechercheErr; ?></span>

                <button title="Rechercher" class="button-recherche" id="buttonRecherche" name="submit"><i class="material-icons-white">search</i></button>

            </div>

            <div id="div-suggestions" class="suggestions masquer"></div>

        </form>

    </section>

</header>

这是我的 css 导致了问题

/*Exemple when screen is large*/

@media screen and (min-width: 1300px) {

  header a {

    display: block;

    margin-left: auto;

    margin-right: auto;

    height: 270px;

    background-size: 100% 120%;

    background-image: url(../images/logo-long.jpg);

    background-repeat: no-repeat;

    background-position: center top;

  }

}

这是自动完成的 CSS。

.afficher {

  display:block;

}

.masquer {

  display:none;

}

.suggestions {

  background-color:white;

  width:194px;

  position:absolute;

  border: 1px solid gray;

  background-image: none;

}

.suggestions ul {

  padding-left:0;

  margin:0;

  list-style-type:none;

}

.suggestions ul li:hover {

  background-color:lightblue;

}

我尝试添加

  background-image: none;

然而它没有起作用。我该怎么做才能解决这个问题谢谢你的帮助

我在这里添加了一个 JsFiddle https://jsfiddle.net/L9afb2u0/

Answer 1

代码有点难以理解，但基本上，删除背景图像并在 html 文档上添加 img 元素。var scriptSug ={&nbsp; &nbsp; "divSuggestions" : null};function viderElement(element) {&nbsp; &nbsp; while (element.lastChild) {&nbsp; &nbsp; &nbsp; &nbsp; element.removeChild(element.lastChild);&nbsp; &nbsp; }}&nbsp;/**&nbsp;* Appelée lors d'un clic dans la fenêtre&nbsp;*/function gererClicFenetre(evenement) {&nbsp; &nbsp; var clicDedans = scriptSug.divSuggestions.contains(evenement.target);&nbsp; &nbsp; window.console.log("Clic dans la zone cliquable ? " + clicDedans);&nbsp; &nbsp; if (!clicDedans) {&nbsp; &nbsp; &nbsp; &nbsp; viderElement(scriptSug.divSuggestions);&nbsp; &nbsp; &nbsp; &nbsp; scriptSug.divSuggestions.className = "suggestions masquer";&nbsp; &nbsp; &nbsp; &nbsp; document.removeEventListener("click", gererClicFenetre);&nbsp; &nbsp; }}/**&nbsp;* Pour demander les suggestions au site web.&nbsp;*&nbsp;* On devrait procéder par AJAX pour récupérer les suggestions, mais&nbsp;* elles sont "hard-codés" pour la démo.&nbsp;*/function afficherSuggestions() {&nbsp; &nbsp; viderElement(scriptSug.divSuggestions);&nbsp; &nbsp; scriptSug.divSuggestions.className = "suggestions afficher";&nbsp; &nbsp; var elemListe = document.createElement("ul");&nbsp; &nbsp; scriptSug.divSuggestions.appendChild(elemListe);&nbsp; &nbsp; for (var i=0;i<5;i++) {&nbsp; &nbsp; &nbsp; &nbsp; var itemListe = document.createElement("li");&nbsp; &nbsp; &nbsp; &nbsp; // TODO : ne pas mettre de .innerHTML dans votre TP&nbsp; &nbsp; &nbsp; &nbsp; itemListe.innerHTML =&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<a href='http://www.google.ca'>Suggestion " + i + "</a>";&nbsp; &nbsp; &nbsp; &nbsp; elemListe.appendChild(itemListe);&nbsp; &nbsp; }&nbsp; &nbsp; // Ajout d'un événement sur tout le document (la fenêtre)&nbsp; &nbsp; document.addEventListener("click", gererClicFenetre, false);&nbsp;}/**&nbsp;* Appelée lors de l'initialisation de la page&nbsp;*/function initialisation() {&nbsp; &nbsp; scriptSug.divSuggestions = document.getElementById("div-suggestions");&nbsp; &nbsp; document.getElementById("recherche").addEventListener("input", afficherSuggestions, false);}window.addEventListener("load", initialisation, false);@charset "UTF-8";&nbsp;/* Créé par Junior Corenbach et MINH NGUYEN */html,&nbsp;body {&nbsp; &nbsp; margin: 0;}#page{&nbsp; &nbsp; background-color: #eFeFeF;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; width: 80%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; font-family: Arial, Helvetica, sans-serif;&nbsp; &nbsp; padding-bottom: 3%;}a{&nbsp; text-decoration: none;&nbsp; color: #aa0000;&nbsp;&nbsp;}a:hover{&nbsp; text-decoration: none;&nbsp; color: #DB9900;&nbsp;&nbsp;}p{&nbsp; margin-left: 30px;}header{&nbsp; &nbsp; background-color: #DFDFDF;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; width: auto;}main{&nbsp; &nbsp; margin-left: 30px;&nbsp; &nbsp; contain: layout;}footer{&nbsp; &nbsp; margin-left: 30px;&nbsp; &nbsp; padding-bottom: 30px;}/* || En tête */h1{&nbsp; &nbsp; margin: 0;}h2{&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; text-align: center;}h4{&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; font-size: 1.4rem;&nbsp; &nbsp; text-align: center;}.afficher {&nbsp; display:block;}.masquer {&nbsp; display:none;}.suggestions {&nbsp; background-color:white;&nbsp; width:194px;&nbsp; position:absolute;&nbsp; border: 1px solid gray;}.suggestions ul {&nbsp; padding-left:0;&nbsp; margin:0;&nbsp; list-style-type:none;}.suggestions ul li:hover {&nbsp; background-color:lightblue;}/* || Page connection */#connection div{&nbsp; &nbsp; margin: 10px;}input[type=button], input[type=submit] {&nbsp; &nbsp; background-color: #DB9900; /* Green */&nbsp; &nbsp; border: #7F5900 solid 1px;&nbsp; &nbsp; border-radius: 5px;&nbsp; &nbsp; color: white;&nbsp; &nbsp; padding: 5px 10px;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; width: 50%;}input[type=button], input[type=submit]:hover {&nbsp; &nbsp; background-color: #C08600;&nbsp; &nbsp; cursor: pointer;}input[type=button], input[type=submit]:active {&nbsp; background-color: #A57300;}.error{&nbsp; &nbsp; color: red;}.recherche{&nbsp; display: flex;&nbsp;&nbsp; margin-bottom: 3%;}.gallery-link{&nbsp; color: #111;&nbsp;&nbsp;}.gallery-link:hover{&nbsp; color: #DB9900;}/*min ici pour tout ecran plus grand est une image*/@media screen and (min-width: 1300px) {&nbsp; header a {&nbsp; &nbsp; display: block;&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; margin-right: auto;&nbsp; &nbsp; height: 270px;&nbsp; }}@media screen and (max-width: 1300px) {&nbsp; &nbsp; header a {&nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; &nbsp; margin-right: auto;&nbsp; &nbsp; &nbsp; height: 270px;&nbsp; &nbsp; &nbsp; background-size: 100% 120%;&nbsp; &nbsp; }}@media screen and (max-width: 1000px) {&nbsp; header a {&nbsp; &nbsp; display: block;&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; margin-right: auto;&nbsp; &nbsp; height: 270px;&nbsp; }}@media screen and (max-width: 700px) {&nbsp; header a {&nbsp; &nbsp; display: block;&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; margin-right: auto;&nbsp; &nbsp; height: 270px;&nbsp; }}.texte-cache {&nbsp; position: absolute !important;&nbsp; clip: rect(1px, 1px, 1px, 1px) !important;&nbsp; clip: rect(1px, 1px, 1px, 1px) !important;}&nbsp; /******************************************/&nbsp; /*************** MENU***********************/&nbsp; /******************************************/.menu-principal {&nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; background-color: #DB9900;&nbsp; }&nbsp;&nbsp;&nbsp; .menu-principal li {&nbsp; &nbsp; float: left;&nbsp; }&nbsp;&nbsp;&nbsp; .menu-principal li a {&nbsp; &nbsp; display: block;&nbsp; &nbsp; color: white;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; padding: 14px 16px;&nbsp; &nbsp; text-decoration: none;&nbsp; }&nbsp;&nbsp;&nbsp; .menu-principal li a:hover {&nbsp; &nbsp; background-color: #111;&nbsp; }&nbsp; /******************************************/&nbsp; /***********ERREUR*************************/&nbsp; /******************************************/&nbsp; .imag-erreur{&nbsp; &nbsp; width: 100%;&nbsp; }&nbsp; .header-erreur{&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; font-size: 1000%;&nbsp; &nbsp; color:#DB9900;&nbsp; &nbsp; border: #111111;&nbsp; }&nbsp; .erreur-text-large{&nbsp; &nbsp; font-size: 300%;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; margin: 0;&nbsp; }&nbsp; .erreur-text-petit{&nbsp; &nbsp; font-size: 120%;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; color:#111;&nbsp; &nbsp; margin: 0;&nbsp; }&nbsp; .icon-page-acces{&nbsp; &nbsp; text-align: center;&nbsp; }&nbsp; /******************************************/&nbsp; /***********GALERY*************************/&nbsp; /******************************************/&nbsp; @font-face {&nbsp; &nbsp; font-family: 'Material Icons';&nbsp; &nbsp; font-style: normal;&nbsp; &nbsp; font-weight: 400;}.material-icons-yellow {&nbsp; &nbsp; font-family: 'Material Icons';&nbsp; &nbsp; font-weight: normal;&nbsp; &nbsp; font-style: normal;&nbsp; &nbsp; color: #DB9900;&nbsp; &nbsp; font-size: 24px;&nbsp; &nbsp; line-height: 1;&nbsp; &nbsp; letter-spacing: normal;&nbsp; &nbsp; text-transform: none;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; white-space: nowrap;&nbsp; &nbsp; word-wrap: normal;&nbsp; &nbsp; direction: ltr;}.material-icons-yellow-large {&nbsp; font-family: 'Material Icons';&nbsp; font-weight: normal;&nbsp; font-style: normal;&nbsp; color: #DB9900;&nbsp; font-size: 900%;&nbsp; line-height: 1;&nbsp; letter-spacing: normal;&nbsp; text-transform: none;&nbsp; vertical-align: top;}.material-icons-white {&nbsp; font-family: 'Material Icons';&nbsp; font-weight: normal;&nbsp; font-style: normal;&nbsp; color: white;&nbsp; font-size: 24px;&nbsp; line-height: 1;&nbsp; letter-spacing: normal;&nbsp; text-transform: none;&nbsp; display: inline-block;&nbsp; white-space: nowrap;&nbsp; word-wrap: normal;&nbsp; direction: ltr;}.material-icons-white-small {&nbsp; font-family: 'Material Icons';&nbsp; font-weight: normal;&nbsp; font-style: normal;&nbsp; color: white;&nbsp; font-size: 16px;&nbsp; line-height: 1;&nbsp; letter-spacing: normal;&nbsp; text-transform: none;&nbsp; display: inline-block;&nbsp; white-space: nowrap;&nbsp; word-wrap: normal;&nbsp; direction: ltr;}.material-icons-red {&nbsp; font-family: 'Material Icons';&nbsp; font-weight: normal;&nbsp; font-style: normal;&nbsp; color: #aa0000;&nbsp; font-size: 24px;&nbsp; line-height: 1;&nbsp; letter-spacing: normal;&nbsp; text-transform: none;&nbsp; display: inline-block;&nbsp; white-space: nowrap;&nbsp; word-wrap: normal;&nbsp; direction: ltr;}div#gallery-large {&nbsp; margin: 5px;&nbsp; border: 1px solid #ccc;&nbsp; display: inline-block;&nbsp; width: 70%;&nbsp; background-color: white;&nbsp; text-align: center;}#gallery-auto{&nbsp; display: inline-block;&nbsp; text-align: center;&nbsp; width: 95%;}.titre-gallery-auto-section{&nbsp; min-height: 50px;}.gallery-hiden{&nbsp; display: none;&nbsp; clip: rect(1px, 1px, 1px, 1px) !important;&nbsp; clip: rect(1px, 1px, 1px, 1px) !important;}div.gallery {&nbsp; &nbsp; margin: 5px;&nbsp; &nbsp; border: 1px solid #ccc;&nbsp; &nbsp; float: left;&nbsp; &nbsp; width: 180px;&nbsp; &nbsp; background-color: white;&nbsp; }&nbsp;&nbsp;&nbsp; div.gallery:hover {&nbsp; &nbsp; border: 1px solid #777;&nbsp; }&nbsp;&nbsp;&nbsp; .imageRecette {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: auto;&nbsp; }&nbsp;&nbsp;&nbsp; div.desc {&nbsp; &nbsp; text-align: center;&nbsp; }&nbsp; div.desc p{&nbsp; &nbsp; float: right;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; text-align: center;&nbsp; }.list-recettes{&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; float: left;}.titre-gallery{&nbsp; min-height: 150px;}&nbsp; /******************************************/&nbsp; /******************************************/&nbsp; /******************************************/&nbsp; .image-details-recette{&nbsp; &nbsp; float: right;&nbsp; &nbsp; margin: 5px;&nbsp; &nbsp; width: 30%;&nbsp; &nbsp; overflow: auto;&nbsp; }&nbsp; .deuxieme-section-recette{&nbsp; &nbsp; padding-top: 2%;&nbsp; &nbsp; clear: both;&nbsp; }input[type=text], input[type=password], input[type=email]&nbsp; {&nbsp; width: 100%;&nbsp; padding: 12px 10px;&nbsp; display: inline-block;&nbsp; border: 1px solid #ccc;&nbsp; box-sizing: border-box;}input[type=search]&nbsp; {&nbsp; width: 60%;&nbsp; display: inline-block;&nbsp; border: 1px solid #ccc;&nbsp; box-sizing: border-box;}.section-recherche{&nbsp; position: absolute;&nbsp; top: 190px;&nbsp; padding-left: 20px;&nbsp; width: 80%;}input[type="checkbox"]{&nbsp; padding: 0%;&nbsp; cursor: pointer;}input[type="submit"]{&nbsp; width: 100%;&nbsp; padding: 12px 10px;}hr{&nbsp; margin: 1%;}#buttonRecherche{&nbsp; width: 50px;&nbsp; border-radius: 0px;&nbsp; border: none;}#button-commenter{&nbsp; width: 120px;&nbsp; display: block;&nbsp; margin-top: 1%;&nbsp; margin-bottom: 1%;}#button-gallery-precedent{&nbsp; width: 120px;&nbsp; margin-top: 1%;&nbsp; margin-bottom: 1%;&nbsp; display: none;}#button-gallery-suivant{&nbsp; width: 120px;&nbsp; margin-top: 1%;&nbsp; margin-bottom: 1%;&nbsp; display: none;}.btn-gallery{&nbsp; text-align:center;}.image-gallery-auto{&nbsp; width: 100%;&nbsp; height: 100%;}textarea{&nbsp; width: 99%;&nbsp; resize: none;}.section-commentaire{&nbsp; margin-left: 2%;&nbsp;&nbsp;}.pied li{&nbsp;&nbsp; &nbsp; &nbsp;list-style-type: none;}.pied-couriel li{&nbsp; list-style-type: none;}button{&nbsp; background-color: #DB9900;&nbsp; border: #7F5900 solid 1px;&nbsp; border-radius: 5px;&nbsp; color: white;&nbsp; padding: 5px 10px;&nbsp; display: inline-block;&nbsp; text-align: center;&nbsp; text-decoration: none;&nbsp; font-weight: bold;&nbsp; font-size: 16px;&nbsp; width: 50%;}.lblRechercher{&nbsp; display: inline;&nbsp; color:white;&nbsp; font-size: 100%;}&nbsp;a{&nbsp; background: white;&nbsp; border: 5px solid reD;}<html><body style="">&nbsp; &nbsp; <div id="page">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<header>&nbsp; &nbsp; <h1>&nbsp; &nbsp; &nbsp; &nbsp; <a href="/">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://static.makeuseof.com/wp-content/uploads/2008/05/opensource.gif" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="texte-cache">Sel gras</span>&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </h1>&nbsp; &nbsp; <section class="section-recherche">&nbsp; &nbsp; &nbsp; &nbsp; <form method="get" action="../pages/recherche.php">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="recherche" class="lblRechercher">Rechercher</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="recherche">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="search" name="recherche" id="recherche" placeholder="Rechercher..." value="" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="error"> </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button title="Rechercher" class="button-recherche" id="buttonRecherche" name="submit"><i class="material-icons-white">search</i></button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="div-suggestions" class="suggestions masquer"></div>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </section>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </header>&nbsp; &nbsp; </div></body>&nbsp; &nbsp;&nbsp;</html>

Answer 2

您可以在 a href 内添加&nbsp;<span class="YourClass">Suggestion 0</span>&nbsp;并为跨度提供不同的 css，然后您可以仅修改建议 0 等

Answer 3

我发现我用过@media&nbsp;screen&nbsp;and&nbsp;(min-width:&nbsp;1300px)&nbsp;{ &nbsp;&nbsp;header&nbsp;h1&nbsp;a&nbsp;{代替@media&nbsp;screen&nbsp;and&nbsp;(min-width:&nbsp;1300px)&nbsp;{ &nbsp;&nbsp;header&nbsp;a&nbsp;{

Answer 4

您应该更多地了解 css 选择器的工作原理。 由于&nbsp;header a&nbsp;表示，a&nbsp;中的任何&nbsp;a&nbsp;=5>header&nbsp;应该有下一个样式（并且 dropdawn 是 header 的一部分，并且其中有&nbsp;a&nbsp;）继承该样式。更具体地说，您可以在标头中添加一些类（例如a.link），并在其中添加单独的样式方式。