内联图像相当于CSS背景附件属性



我的网站主页有一个用这个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位置属性可以在内联图像上使用,以获得相同的效果?或者这是一个情况下,图像是CSS背景,而不是内联?

虽然最好使用css,但您也可以使用响应式图像。你也可以在媒体查询中使用单独的图像,例如,为两个不同的设备创建两个不同大小的图像,并保持一个隐藏,一个可见,像这样:

// 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='' />

请查看此链接以获取另一个解决方案。最好和你的设计师讨论一下你应该使用哪一个。

可以将图像嵌入为内联图像,使用此工具将图像转换为base64格式的图像

http://webcodertools.com/imagetobase64converter/Create

background-image: url(data:image/png;base64,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);

最新更新