html - 光滑 slider 内的背景图像

Question

<div id="largeCarousel" style="display:inline-block; float:right;">
        <div class="homepage-item" style="padding-bottom:52%; position:relative; box-sizing:border-box;">
            <div id="largeCarouselContent" style="position:absolute; top:0; left:0; width:100%; height:100%; overflow-x:hidden; overflow-y:hidden">
                <div style="color:white;">Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap </div>

                <div>
                    <div style="position:relative; top:0; left:0;">Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap </div>
                    <img src="~/Content/images/Canvas1.jpg" style="position:absolute; top:0; left:0; height:100%; width:100%;" />
                </div>                    
                <div><img src="~/Content/images/logo.jpeg" style="width:100%;" /></div>
            </div>
        </div>
    </div>

上面我有一个包含 slider 的内容框。内容框的纵横比为 1/.52。我的目标是在每张幻灯片上使用不同的背景图像，并将内容覆盖在图像上。背景图像也必须通过网络访问，因此设置背景图像 css 属性似乎不起作用。 #largeCarouselContent 中的每个 div 都是一张幻灯片。当前解决方案不起作用，因为 canvas1.jpeg 跨越所有幻灯片。我很困惑，有什么想法吗？

Answer 1

如果我理解你的意思，你想要一张背景图片，对吧？如果是这样，为什么不使用 CSS 背景 图像而不是内联图像？并为每张幻灯片使用 background-size: cover;。因此，无论您的图片的宽高比是多少，它都会填满整个容器。

.homepage-item {
    background: url("~/Content/images/Canvas1.jpg") no-repeat center / cover;
    box-sizing: border-box;
    padding-bottom: 52%;
    position: relative;
}