我的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;
}
答案 0 :(得分:3)
您在双引号HTML属性中使用了双引号URL。那不会有好的结果。在CSS中使用单引号。
如果这不能解决问题,请记住图像路径是相对于HTML文档的。最好使用相对于根的网址-基本上,如果图片位于
https://example.com/theme/img/products/test.jpg
,然后尝试放置
url('/theme/img/products/test.jpg')
在您的样式属性中。
答案 1 :(得分:1)
如评论中所述,您没有在图像上设置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>
答案 2 :(得分:0)
尝试这样,URL在''-s之间,而不是“” -s之间。也许/在img之前丢失了。
<div class="product_div" style="background-image: url('/img/products/test.jpg')"></div>