背景图像未应用于 Div答案

【问题标题】：Background Image Not Applied To Div背景图像未应用于 Div
【发布时间】：2022-01-25 10:03:07
【问题描述】：

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

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

这是背景图片：

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

但它并没有应用到 div 中，也没有将图像显示为背景！

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

【问题讨论】：

图片是否存在？浏览器的网络选项卡是否显示加载图像时出错？如果img 文件夹位于您网站结构的根目录，您可以设置"/img/shadow3.png" 以保持一致性
你检查过 Inline Css 吗？
请提供足够的代码以便我们看到问题所在。否则任何答案都只是猜测。见stackoverflow.com/help/minimal-reproducible-example

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是你想要的吗？

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

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

如果不起作用，请尝试与我们共享一个 codepen，这样会更容易为您提供帮助。

【讨论】：

【解决方案3】：

你必须在 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;
}

【讨论】：