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 上工作）：

滑块的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;
}

在Slick Carousel div中使用背景图片（响应式）

1 个答案: