css - 无法从 css 加载图像以 Bootstrap carrousell

Question

我在我的网站上使用 bootstrap carousel，我想为 carrousel 的图像添加一些效果为此我需要从 CSS 而不是从 HTML 加载图像但是如果我删除 img 标签那么 carousel 不会' 显示任何内容并跳到下一张幻灯片。

这是一个显示轮播如何加载幻灯片的 div 标签。

<div class="item">
<img src="path/img.png" alt="Second slide">
<div class="container"> 
</div>

这是我的CSS

.imagefromcss{
background-image:url("path/to/bg.png"), url("path/to/another.jpg");
background-repeat: repeat, no-repeat;
background-size:auto, cover;
}

这就是我尝试使用类 imagefromcss 从 css 加载图像但没有显示图像的方式

<div class="item">
<img src="" alt="Second slide" class="imagefromcss">
<div class="container"> 
</div>

任何人都可以建议我如何实现这一目标吗？

Answer 1

指定背景图片的宽度和高度，如下所示。

.imagefromcss{
 background-image:url("path/to/bg.png"), url("path/to/another.jpg");
 background-repeat: repeat, no-repeat;
 background-size:auto, cover;
 width:300px;
 height:300px; 
 }

Sample DEMO