如何在不同屏幕尺寸的媒体查询中覆盖背景图像？

Question

我有一个电子邮件模板，其中使用了背景图片。图像大小和我的模板大小是 600px（宽度）。我已经使用 class 回调 img，我想为所有横向和纵向屏幕尺寸覆盖此 class。 特别是新 iPhone。我该怎么做呢？请帮助我。

媒体查询

<style>

    @media only screen and (min-device-width: 414px)and (max-device-width: 550px) {

    .back-img  {    background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 450px !important;
}
    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {

    .back-img  {    background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 375px !important;
}

    @media screen and (min-device-width: 320px) and (max-device-width: 374px) {

    .back-img  {    background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 320px !important;
}
</style>

HTML 文件 link 下面

enter link description here

Answer 1

您错过了每个媒体查询的结束大括号。为每个媒体查询添加一个右大括号 }，它将起作用。

<style>

    @media only screen and (min-device-width: 414px)and (max-device-width: 550px) {

    .back-img  {    background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 450px !important;
}}
    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {

    .back-img  {    background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 375px !important;
}}

    @media screen and (min-device-width: 320px) and (max-device-width: 374px) {

    .back-img  {    background: url(https://img.techpowerup.org/200601/cbanners.jpg) repeat-x !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    height: 320px !important;
}}
</style>

如何在不同屏幕尺寸的媒体查询中覆盖背景图像？

how to override background image in media query for different screen size?

html

css

media-queries

responsive-design

HTML 文件 link 下面