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>

上面我有一个包含滑块的内容框。内容框的宽高比为1 / .52。我的目标是在每张幻灯片上放置不同的背景图像，内容覆盖在图像上。还必须通过Web访问背景图像，因此设置background-image 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;
}

光滑滑块内的背景图像

1 个答案: