Question

我遇到一个问题，在笔记本电脑的网站上显示背景图片（chrome和safari），但是当我在移动设备上使用相同的浏览器时，背景图片没有出现，我不确定为什么吗？

下面是我的CSS：

#callToAction
{
    padding-top: 80px;
    padding-bottom: 80px;
    text-align:center;
    background-image:url(../img/17545.jpg);
    background:url(../img/17545.jpg);
    background-position:center;
    background-size: cover;
    background-attachment: fixed;
}

实际图像尺寸为1280x475

如果您想亲自观看，请访问我们的网站https://www.metis-online.com，这是号召性用语的背景图片，上面标有“立即获得认证”。

Answer 1

它对我有用，我想因为您的background-size是cover，所以左侧和右侧只是视口之外，而只是白色（如果这就是您在'没有出现'） ..

尝试一下：

#callToAction
{
    background-size: contain;
}

Answer 2

图像未出现，因为封面显示图像的白色区域

在媒体查询中使用以下代码

background-size: 100% 100%;

或者这个

background-size: 150vw 100vh

#callToAction {
        padding-top: 80px;
        padding-bottom: 80px;
        text-align: center;
        background-image: url(../img/17545.jpg);
        background: url(../img/17545.jpg);
        background-position: center;
        background-size: 100% 100%; /* <-- Replace Cover with 100% */
        background-attachment: fixed;
        background-repeat: no-repeat;
    }

Answer 3

css中的CONTAIN命令会根据您定义的盒子尺寸或屏幕比例调整图像大小，而COVER命令会使用您定义的完整空间来适应图像是否适合屏幕大小，因此CONTAIN命令将正常工作

背景图片未出现在移动设备中

3 个答案: