html - 从 css 添加图像

Question

我曾尝试将图像添加到页脚 div，但我尝试过的方法无效:

html:

<footer>
 <div class="imagenFooter" style="background-image: url(&quot;./images/footer-bg.jpg&quot;);"></div>
 <div class="footer-fluid" itemscope="" >
  <div class="container">
   <img class="logo_footer" alt=""><span class="direccionFooter" itemprop="address"></span>
   <nav class="enlacesFooter">

假设图像必须显示在图像页脚中，我已经在 css 中尝试过但没有效果。

.imagenFooter {
    background-image: url('/images/footer-bg.jpg');
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
} 

我只需要从 css 添加图像。感谢帮助..

Answer 1

您不会看到图像，因为您的 <div> 中没有内容，所以尝试添加填充(玩这个值，因为我不知道你的图像的大小)，并且不要忘记添加 !important要覆盖 HTML 中的图像，请尝试以下代码片段:

.imagenFooter {
    background-image: url('https://via.placeholder.com/500x100')!important;
    padding-top: 20%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
} 

<footer>
 <div class="imagenFooter" style="background-image: url(&quot;./images/footer-bg.jpg&quot;);"></div>
 </footer>