背景图像不适用于 Div

Question

我是 CSS 的新手，我想像这样向 div 添加背景图片：

<div class="col-4 customBack">  
</div>

这里是背景图片：

.customBack{
    background-image: url("img/shadow3.png") !important;
}

但它没有应用到 div 中并且不显示图像作为背景！

那么我怎样才能正确显示这个背景...

Answer 1

确保 .customBack 占据一些 space。图片可能无法显示，因为 div 不占用任何 space。如果它不占用任何 space 尝试添加 width 和 height 样式或在 div 中添加一些内容。如果图像仍然没有出现，请尝试将 background-size: cover; 添加到 .customBack。还要确保图片路径准确无误。

如果还是不行，试试分享一个代码笔给我们，这样会更容易帮助到你。

Answer 2

您必须在 div

中添加一些内容

<div class="col-4 customBack">
  <p>some text here for example</p>
</div>

或者你可以初始化宽高值

.customBack{
    width: 250px;
    height: 250px;
    background-image: url("img/shadow3.png") !important;
}

Answer 3

这是你想要的吗？

div {
  border: 2px solid black;
  height:300px;
  width:300px;
  background: url('https://picsum.photos/300/300');
}

<div></div>

背景图像不适用于 Div

Background Image Not Applied To Div

html

css

twitter-bootstrap

twitter-bootstrap-3