javascript - 在 Slick Carousel div 中使用背景图像(响应式)

Question

我正在使用Slick Carousel及其响应式设置。

这段代码工作正常:

<div id="myimages">

    <div>
        <img src="https://via.placeholder.com/250x300">
        <br />
        <br />
        Sample
    </div>

    <!-- repeat divs...

</div>

但是，当我尝试在 DIV 中使用背景图像和透明内部图像时，它不再正常工作:

<div id="myimages">

    <div style="background:url(https://via.placeholder.com/250x300) no-repeat center;">
        <img src="http://www.1x1px.me/FFFFFF-0.png">
        <br />
        <br />
        Sample
    </div>

    <!-- repeat divs... -->

</div>

有人知道如何使 Slick Carousel 与 DIV 中的背景图像一起使用吗？

这是一个无法正常工作的演示: https://jsfiddle.net/62y4h51w/

Answer 1

您可以尝试下一步修改并告诉我是否按预期工作(似乎在您的 jsfiddle 上工作):

slider 的 HTML:

<div id="myimages">
    <div>
        <img class="bg-image" src="http://www.1x1px.me/FFFFFF-0.png">
        <br/><br/>
        Sample
    </div>
</div>

添加 CSS

.bg-image {
    background-image:url(https://via.placeholder.com/250x300);
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
}