Question

我最近发布了一个网站http://marishomeimprovements.com/ 在页面顶部的背景中有一张图片，无论出于何种原因，它都无法在iPhone上通过Safari加载。

HTML：

<section class="home" id="home">
    <div class="overlay">
        <div class="title">
            <p>The Best Remodeling Company</p>
            <h1>We Are Maris Home Improvements</h1>
            <p>Specializing in Decks, Windows, Siding and More.</p>
            <div class="giftCardAd">
                <h1 class="heading"><span id="callNow">Call Now!</span></h1>
                <h3>$25 gift card with free estimate.</h3>
                <h2>636-778-4343</h2>
                <h4>We are here for you.</h4>
            </div>
        </div>
    </div>     
</section>

的CSS：

.home{
height: 600px;
background-image: url('../images/background.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
background-size: cover;
text-align: center center;
overflow: hidden;
}

.home .overlay{
    background-color: rgba(0, 0, 0, 0.25);
    height: 600px;
    padding: 70px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.home .overlay .title h1{
    font-size: 45px;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 600;
    margin: 0;
}

.home .overlay .title p{
    line-height: 1.6em;
    color: #ddd;
    font-size: 16px;
    font-weight: 300;
    margin-top: 20px;
}
.home .overlay .title .a-btn{
    font-weight: 400;
    display: inline-block;
    margin-top: 30px;
    margin-right: 20px;
    background-color: #0060e2;
    color: #fff;
}

.home .overlay .title .a-btn:hover{
    border: 1px solid #0060e2;
    color: #fff;
    background-color: transparent;
}

@media screen and (max-width: 480px){
    .home .overlay .title .bannerImage{
        display:none;
    }

    .box .item .location{
        display:none;
    }
    .heading{
       font-size:30px; 
    }
}

然后再做一些：

@media only screen and (max-width: 600px) {
    .home div .title{
        margin-top:4em;
        clear:both;
        width:90%;
    }

    .home div .title h1{
        font-size:35px !important;
    }

    .giftCardAd{
        width:95%;
    }

    #live-chat{
        display:none;
    }
}

我遇到的问题是它没有加载图片，或者至少它没有在iPhone上正确显示给用户。我尝试将图片的格式从jpg更改为png，但似乎没有任何效果。我非常感谢你的帮助！

Answer 1

删除导致问题的background-attachment: fixed

在iphone上的Safari中不显示图片

1 个答案: