使用css设置背景图像

Question

我写这段代码来为背景设置图像，但我没有得到我的背景图像我做什么？任何解决方案？

＆＃13;

＆＃13;

.instantqoute{
    background:url('images/services/Chrysanthemum.jpg');
    }

＆＃13;

<br><br>
<div class="row instantqoute" >
    <div class="col-sm-12">
     </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

其他条件相同，假设您的网址正确无误：

div内没有内容。没有明确的高度设置。因此它的计算高度为0。这不会为要绘制的背景提供区域。

它需要一个高度。通过在其中添加一些内容或设置height或min-height属性来为其提供一个。

Answer 2

请将高度和宽度设为.instantqoute。 由于div为空白，因此无法加载背景图像。

Answer 3

检查您的网址并为您的div添加高度和宽度。

<style>
  .instantqoute {
     background:url('images/services/Chrysanthemum.jpg');
  }
</style>

<br><br>
<div class="row instantqoute" style="width:100px; height:100px;">
   <div class="col-sm-12"></div>
</div>

希望它会有所帮助。

Answer 4

你需要拥有这个div的大小，例如

.instantqoute {
  background:url('images/services/Chrysanthemum.jpg');
  width: 100px;
  height: 100px;
}

<div class="row instantqoute" >
  <div class="col-sm-12">
  </div>
</div>

最常见的错误是链接不好 例如结构

-css/style.css
-js/script.js
-img/image.jpg
-index.html

后台正在从css加载，所以如果你给这样的链接"img/image.jpg" Style css尝试在位置找到此图片："css/img/image.jpg" 对于左侧文件夹，您需要输入"../" 例如："../img/image.jpg"

我的伦敦很糟糕

Answer 5

  

假设给定路径正确：

您的div instantqoute不包含任何内容，因此您的图片不会显示。

为什么？

由于您没有为（div / img）/ no内容指定宽度和高度。

<强>解决方案：

给div和amp;的高度和宽度;添加内容（如果需要）。

下一步：

如果给出了高度和宽度，你仍然看不到背景。

，然后

  

假设给定的路径不正确：

• 图像与引用它的文件位于同一目录中吗？
• 目录位于
目录下
• 目录上方？

“下面”和“上面”是指子目录和父目录。相对文件路径为我们提供了双向旅行的方式。看看我的原始示例：

以下是您需要了解的相关文件路径：

• 以“/”开头，返回根目录并从那里开始
• 以“../”开头向后移动一个目录并从那里开始
• 以“../../”开头，向后移动两个目录并启动 那里（等等......）
• 要继续前进，只需从第一个子目录开始并保持 前进

Answer 6

您可以使用<img>来执行此检查。在div中添加高度和宽度，同时检查图像的网址是否正确。

<br><br>


   <div class="row instantqoute" style="height:200px;width:200px;"><img src='images/services/Chrysanthemum.jpg' style="height:100%;width:100%; ">
         <div class="col-sm-12">
                  </div>

   </div>

Answer 7

你可以这样做：

.instantqoute{
background: url(http://via.placeholder.com/2000x400); 
  height: 400px;
  width: 100%;
}

<div class="row instantqoute" >
    <div class="col-sm-12">
     </div>
 </div>