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

删除

 display: none:

显示：没有，您什么也不会看到

Answer 2

您将看不到图像，因为您的<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>

从CSS添加图像

2 个答案: