时间戳

首页 > 解决方案 > 在 Slick Carousel div 中使用背景图像（响应式）

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

问题描述

我正在使用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/

标签： javascriptjquerycarousel

解决方案

您可以尝试下一个修改并告诉我是否按预期工作（似乎适用于您的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;
}

推荐阅读