html - 等价于 CSS background-attachment 属性的内联图像？

Question

我网站的主页有一个使用此 CSS 实现的横幅图像。使用媒体查询，背景图像设置为在较小的屏幕上滚动:

#banner {
    background: url("../images/banner1.jpg") no-repeat fixed left 13em / 100% auto rgba(0, 0, 0, 0);
    height: 47em;
    overflow: hidden;
    width: 100%;
}

/* Mobile */
@media screen and (max-width: 767px) {

#banner {
    height: 27em;
    background-attachment: scroll;
    background-position: left 7em;
    }

}

我想把它做成内联图片，这样它就可以通过我的 CMS 轻松更新。设计者说它必须是 CSS 背景图像才能应用 background-attachment 属性。

我怀疑 CSS position 属性可用于内联图像以获得相同的效果？或者在这种情况下图像必须是 CSS 背景而不是内联？

Answer 1

虽然为此使用 css 更好，但您可以使用 responsive image以及。您也可以将单独的图像与媒体查询一起使用，例如，为两个不同的设备创建两个不同大小的图像，并保持一个隐藏和一个可见，如下所示:

// Common rules for both images
.banner {
    //...
}

#bannerBig {
    display:block;
}

#bannerSmall {
    display:none;
}

/* Mobile */
@media screen and (max-width: 767px) {

    #bannerBig {
        display:none;
    }

    #bannerSmall {
        display:block;
    }
}

图片:

<img class='banner' id='bannerBig' src='' />
<img class='banner' id='bannerSmall' src='' />

同时检查此链接中的 another solution .最好与您的设计师讨论您应该使用哪一个。