Question

我的div具有background-image属性，但它不想加载。

我的代码：

<div class="product_div" style="background-image: url("img/products/test.jpg")"></div>

我的CSS：

.mainpage .new_products .product {
    border: 1px solid dodgerblue;
    padding: 10px;
    width: auto;
    display: inline-block;
}

.mainpage .new_products .product .product_div {
    max-height: 100px;
    max-width: 100px;
    background-size: cover;
}

Answer 1

您在双引号HTML属性中使用了双引号URL。那不会有好的结果。在CSS中使用单引号。

如果这不能解决问题，请记住图像路径是相对于HTML文档的。最好使用相对于根的网址-基本上，如果图片位于

https://example.com/theme/img/products/test.jpg

，然后尝试放置

url('/theme/img/products/test.jpg')

在您的样式属性中。

Answer 2

如评论中所述，您没有在图像上设置width或height，仅设置了max-width和max-height。这意味着div没有任何尺寸，因此不会显示图像。我猜如果您给它这些尺寸，它将起作用：

.product_div {
  max-height: 100px;
  max-width: 100px;
  background-size: cover;
  height: 100px;
  width: 100px;
}

<div class="product_div" style="background-image: url('https://placeimg.com/640/480/any')"></div>

https://jsfiddle.net/bzah8us7/

Answer 3

尝试这样，URL在''-s之间，而不是“” -s之间。也许/在img之前丢失了。

<div class="product_div" style="background-image: url('/img/products/test.jpg')"></div>

网站不想以div样式加载图片

3 个答案: