CSS :重复问题之前

Question

我在页脚上设置了 :before 属性，但我遇到了一个重复的问题。我的意思是我在 :before 属性中的图像重复了很多次，我不知道为什么：/ 在我的网站上看到它会更容易理解:) http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php

这是我的代码

/*Insertion image TDB footer*/
div.footer-container ::before{
 ontent:url("../img/Tonnerre/img_tdb_footer.png");
 }
/*Fin insertion image*/

<div class="footer-container">
     <footer id="footer" class="container" data-nb-cols="6">
      <div class="container">
       <!-- Block Newsletter module-->
<section id="newsletter_block_left">
 <h4>Lettre d'informations</h4>
 <div class="block_content">
  <form action="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php" method="post">
   <div class="form-group">
    <input class="inputNew form-control newsletter-input placeholder" placeholder="Saisissez votre adresse e-mail" id="newsletter-input" type="text" name="email" size="18" value="">
                <button type="submit" name="submitNewsletter" class="btn btn-default button button-small">
                    <span>ok</span>
                </button>
    <input type="hidden" name="action" value="0">
   </div>
  </form>
 </div>
</section>
<!-- /Block Newsletter module-->
<section id="social_block" class="footer-block">
 <h4 class="title_block">Nous suivre</h4>
 <ul class="toggle-footer" style="">
  <li class="facebook"><a class="_blank" href="https://www.facebook.com/tonnerredebelt/?fref=ts" target="_blank">Facebook</a></li>              
    
 </ul>
</section>
<!-- Block categories module -->
<section class="blockcategories_footer footer-block col-xs-12 col-sm-2">
 <h4>Catégories</h4>
 <div class="category_footer toggle-footer" style="">
  <div class="list">
   <ul class="tree dynamized" style="display: block;">
            
<li class="last">
 <span class="grower CLOSE"> </span><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=8&amp;controller=category&amp;id_lang=1" title="">
  Produits
 </a>
   <ul style="display: none;">
            
<li>
 <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=10&amp;controller=category&amp;id_lang=1" title="Ceintures &nbsp;en cuir, noires, Bicolores, fantaisistes… Retrouvez tout l'univers de la marque celio* à travers sa E-boutique.">
  Boucles
 </a>
 </li>

                
<li>
 <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=9&amp;controller=category&amp;id_lang=1" title="LIVRAISON &amp;amp; RETOUR GRATUITS◅ Retrouvez les&nbsp; ceintures &nbsp;homme en ligne | Grand choix parmi plus de 1 500 marques sur...">
  Bracelets
 </a>
 </li>

                
<li class="last">
 <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=7&amp;controller=category&amp;id_lang=1" title="Ceintures &nbsp;: profitez de toutes nos offres du catalogue&nbsp; ceintures &nbsp;sur Galerieslafayette.com. N'hésitez pas vos achats sont satisfaits ou remboursés pendant 30&nbsp;...">
  Ceintures
 </a>
 </li>

         </ul>
 </li>

       
          </ul>
  </div>
 </div> <!-- .category_footer -->
</section>
<!-- /Block categories module -->
 <!-- MODULE Block footer -->
 <section class="footer-block col-xs-12 col-sm-2" id="block_various_links_footer">
  <h4>Informations</h4>
  <ul class="toggle-footer" style="">
       <li class="item">
     <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=prices-drop" title="Promotions">
      Promotions
     </a>
    </li>
         <li class="item">
    <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=new-products" title="Nouveaux produits">
     Nouveaux produits
    </a>
   </li>
          <li class="item">
     <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=best-sales" title="Meilleures ventes">
      Meilleures ventes
     </a>
    </li>
            <li class="item">
    <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=contact" title="Contactez-nous">
     Contactez-nous
    </a>
   </li>
               <li class="item">
      <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_cms=3&amp;controller=cms&amp;id_lang=1" title="Conditions d'utilisation">
       Conditions d'utilisation
      </a>
     </li>
                    <li>
    <a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=sitemap" title="sitemap">
     sitemap
    </a>
   </li>
         <li>
    © 2014 <a class="_blank" href="http://www.prestashop.com" target="_blank">Logiciel e-commerce par PrestaShop™</a>
   </li>
     </ul>
  
 </section>
 <!-- /MODULE Block footer -->
<!-- Block myaccount module -->
<section class="footer-block col-xs-12 col-sm-4">
 <h4><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=my-account" title="Gérer mon compte client" rel="nofollow">Mon compte</a></h4>
 <div class="block_content toggle-footer" style="">
  <ul class="bullet">
   <li><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=history" title="Mes commandes" rel="nofollow">Mes commandes</a></li>
      <li><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=order-slip" title="Mes avoirs" rel="nofollow">Mes avoirs</a></li>
   <li><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=addresses" title="Mes adresses" rel="nofollow">Mes adresses</a></li>
   <li><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=identity" title="Gérer mes informations personnelles" rel="nofollow">Mes informations personnelles</a></li>
      
              </ul>
 </div>
</section>
<!-- /Block myaccount module -->
<!-- MODULE Block contact infos -->
<section id="block_contact_infos" class="footer-block col-xs-12 col-sm-4">
 <div>
        <h4>Informations sur votre boutique</h4>
        <ul class="toggle-footer" style="">
                         <li>My Company, 42 avenue des Champs Elysées
75000 Paris
France             </li>
                                     <li> 
              <span>0123-456-789</span>
             </li>
                                     <li>
              <span><a href="mailto:%73%61%6c%65%73@%79%6f%75%72%63%6f%6d%70%61%6e%79.%63%6f%6d">sales@yourcompany.com</a></span>
             </li>
                    </ul>
    </div>
</section>
<!-- /MODULE Block contact infos -->
<div id="block_facebook_like" class="block jq_slide_toggle">
 <h4>Facebook</h4>
 <div class="facebook-fanbox">
  <div class="fb-like-box fb_iframe_widget" data-href="https://www.facebook.com/tonnerredebelt/?fref=ts" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false" data-width="292" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=334341610034299&amp;color_scheme=light&amp;container_width=288&amp;header=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Ftonnerredebelt%2F%3Ffref%3Dts&amp;locale=en_US&amp;sdk=joey&amp;show_border=false&amp;show_faces=true&amp;stream=false&amp;width=292"><span style="vertical-align: bottom; width: 292px; height: 214px;"><iframe name="f1cfcf364c" width="292px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/plugins/like_box.php?app_id=334341610034299&amp;channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D42%23cb%3Df251877a6%26domain%3Diutdoua-webetu.univ-lyon1.fr%26origin%3Dhttp%253A%252F%252Fiutdoua-webetu.univ-lyon1.fr%252Ff3e4cbbb3%26relation%3Dparent.parent&amp;color_scheme=light&amp;container_width=288&amp;header=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Ftonnerredebelt%2F%3Ffref%3Dts&amp;locale=en_US&amp;sdk=joey&amp;show_border=false&amp;show_faces=true&amp;stream=false&amp;width=292" class="" style="border: none; visibility: visible; width: 292px; height: 214px;"></iframe></span></div>
 </div>
</div>
<!-- MODULE Block reinsurance -->
<div id="reinsurance_block" class="clearfix">
 <ul class="width5"> 
     <li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-2-1.jpg" alt="Échange en magasin"> <span>Échange en magasin</span></li>                        
     <li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-3-1.jpg" alt="Paiement à l'expédition."> <span>Paiement à l'expédition.</span></li>                        
     <li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-4-1.jpg" alt="Livraison gratuite"> <span>Livraison gratuite</span></li>                        
     <li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-5-1.jpg" alt="Paiement 100% sécurisé"> <span>Paiement 100% sécurisé</span></li>                        
     <li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/" alt="Satisfait ou remboursé"> <span>Satisfait ou remboursé</span></li>                        
   </ul>
</div>
<!-- /MODULE Block reinsurance -->

       <a id="logo_footer" href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/" title="Tonnerre De Belt">
        <img class="logo" src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/img/tonnerre-de-belt-logo-1447323498.jpg" alt="Tonnerre De Belt" width="1681">
       </a>
      </div>
     </footer>
    </div>

感谢您的帮助:)

亚历克西斯

Answer 1

您应该在页脚中添加 background-image and background-repeat 属性

.footer-container ::before {
    content: " ";
    background-image: url("../../img/Tonnerre/img_tdb_footer.png");
    background-repeat: no-repeat;
}

Answer 2

问题可能出在您的选择器上。你在你的网站上这样做：

.footer-container *::before
{
  content:url("../img/Tonnerre/img_tdb_footer.png");
}

看到选择器中的 * 了吗？这意味着您希望 .footer-container 的所有子元素都应用 css。我想你可能不希望它像这样工作。

也许您可以尝试 .footer-container::before 在包含 .footer-container class 的元素之前应用，这只是一个元素。

Answer 3

不要忘记在之前为您的元素添加高度和宽度：

.footer-container ::before {
    content: " ";
    background: url("../../img/Tonnerre/img_tdb_footer.png") no-repeat;
    height:100px;
    width:100px;
    background-size:100%;
}

CSS :重复问题之前

CSS :before repeat issue

css

pseudo-element