Question

我在父div中有一个div和span元素一个div在我的系统上有一张图片的背景图片，但是背景图片没有占据整个图像，请问为什么会这样，我只是想将图像并排放置在其下的文本

css

.img-w {
   position: relative;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  height: 150px;
   width: 200px;
              }

html

<div style="width: auto;height: auto"><div class="img-w col-md-3 col " id="    {{$image->id}}" style="background-image: url('{{$image->filename}}')" data-src="    {{$image->filename}}">
 </div><span style="    color: #333333;
position: relative;
width: 100%;
text-align: justify;
display: inline;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i><br/> <br/></span></div>

Answer 1

您是否尝试将宽度和高度放在父div上？然后使.img-w宽度和高度100％

-

所以使父div高度为150px，宽度为200px，然后.img-w宽度和高度为100％

Answer 2

这是创建具有图像背景的元素的更好方法。如果需要，您可以轻松地使背景图像动态

＆＃13;

              
.container {
    position: relative; 
    max-width: 100%; /* Maximum width */
    margin: 0 auto; /* Center it */
}

.container .content {
    position: absolute; /* Position the background text */
    background: rgba(0,0,0,0.4); /* Black background with 0.5 opacity */
    bottom:0;
    color: #f1f1f1; /* Grey text */
    width: 100%; /* Full width */
    padding: 20px; /* Some padding */
}

＆＃13;

<div class="container col-md-3 col">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" />

  <div class="content">
    <span>What is Lorem Ipsum?
      <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i><br/> <br/>
      </span>https://stackoverflow.com/questions/50770855/div-background-image-not-filling-the-div#
  </div>
</div>

＆＃13;

希望这会引导你结束你的问题。

问候！

Answer 3

试试这个

https://jsfiddle.net/7h16z3yx/

.img-w {
   background-image: url(https://www.fg-a.com/wallpapers/white-background-geo-shapes.jpg);
  position: relative;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  height: 150px;
  width: 200px;
}

.img-text{
   color: #333333;
    width: 100%;
    display: flex;
    position: absolute;
    bottom: 0;
    justify-content: center;
}

/* demo theme */
.img-w {
  border : 2px solid #929292;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">


<div style="width: auto;height: auto">
  <div class="img-w col-md-3 col ">
  <span class="img-text">text
    <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i>
 </span>
  </div>
  
</div>

Div背景图片没有填充div

3 个答案: