Javascript 无限幻灯片插件不使用背景图像

我正在使用无限幻灯片插件（）。它与

img标签

完美配合，但与背景图像不配合

请检查以下有背景和无背景图像的代码

我需要使用背景图像

你能帮我解决这个问题吗？

$（函数（）{$（'.scroll1'）.infiniteslide（）；}）
html，正文{
保证金：0；
填充：0；
身高：100%；
-webkit字体平滑：抗锯齿；
}
.1{
显示：无；
}
.1 img{
垂直对齐：底部对齐；
宽度：400px；
}
.banner_bg{
背景重复：无重复；
背景尺寸：封面；
宽度：100%；
高度：自动；
背景位置：中心；
最小高度：100%；
}
.应用程序\u滑块\u 1{
背景图像：线性渐变（rgba（0,0,0,0.4），rgba（0,0,0,0.4）），url（'http://www.uniwallpaper.com/static/images/butterfly-wallpaper.jpeg');
}
.应用程序\u滑块\u 2{
背景图像：线性渐变（rgba（0,0,0,0.4），rgba（0,0,0,0.4）），url（'http://www.uniwallpaper.com/static/images/Wallpaper-20.jpg');
}
.应用程序\u滑块\u 3{
背景图像：线性渐变（rgba（0,0,0,0.4），rgba（0,0,0,0.4）），url（'http://www.uniwallpaper.com/static/images/Wallpaper-10.jpg');
}
.应用程序\u滑块\u 4{
背景图像：线性渐变（rgba（0,0,0,0.4），rgba（0,0,0,0.4）），url（'http://www.uniwallpaper.com/static/images/wallpaper-pictures_KMw1jzE.jpg');
}













你用bg标记div-没有大小；设置固定大小


$（函数（）{$（'.scroll1'）.infiniteslide（）；}）
html，正文{
保证金：0；
填充：0；
身高：100%；
-webkit字体平滑：抗锯齿；
}
.1{
显示：无；
}
.1 img{
垂直对齐：底部对齐；
宽度：400px；
}
.banner_bg{
背景重复：无重复；
背景尺寸：封面；
/*宽度：100%*/
高度：自动；
背景位置：中心；
/*最小高度：100%*/
宽度：100px；
高度：100px；
}
.应用程序\u滑块\u 1{
背景图像：线性渐变（rgba（0,0,0,0.4），rgba（0,0,0,0.4）），url（'http://www.uniwallpaper.com/static/images/butterfly-wallpaper.jpeg');
}
.应用程序\u滑块\u 2{
背景图像：线性渐变（rgba（0,0,0,0.4），rgba（0,0,0,0.4）），url（'http://www.uniwallpaper.com/static/images/Wallpaper-20.jpg');
}
.应用程序\u滑块\u 3{
背景图像：线性渐变（rgba（0,0,0,0.4），rgba（0,0,0,0.4）），url（'http://www.uniwallpaper.com/static/images/Wallpaper-10.jpg');
}
.应用程序\u滑块\u 4{
背景图像：线性渐变（rgba（0,0,0,0.4），rgba（0,0,0,0.4）），url（'http://www.uniwallpaper.com/static/images/wallpaper-pictures_KMw1jzE.jpg');
}













但如何显示宽度：100%，因为我必须全屏显示。您也必须将大小100%添加到li容器中。但是这个插件不是为全屏图像设计的，在codepen中，两个答案都适用于我。请在答案中添加代码笔链接。谢谢我的帮助和支持