Question

我在调整iPhone背景图片大小时遇到问题。当我处于开发者模式时，它们看起来很正常，但在iPhone上它们模糊不清并且搞砸了（参见差异图片）。

第一张照片是iPhone的假设。我尝试了我能想到的一切。请访问http://nlm-marketing.herokuapp.com/，如果您有iPhone，请从那里查看，这样您就可以看到我正在谈论的内容。请帮忙。谢谢！

CSS

@media only screen /*iPhone*/
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)  {




    .img-bg {
        overflow: hidden;
        background: url('/images/341778467.jpg') no-repeat center center;
        background-attachment: fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: auto !important;
        max-width: 100%;
        width: 100%;
        z-index: -1;


    }

}

Answer 1

使用此代码我希望它对您有用

<强> CSS

@media only screen /*iPhone*/
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)  {



.img-bg {


height: 650px;
    padding: 300px;
    background:  url('img2.jpg');
    background-size: cover;
    background-attachment: fixed;
}

.img-bg  p {
    text-align: center;
    text-transform: uppercase;
    color: #fff !important;
    font-size: 50px !important;
    font-family: 'Work Sans', sans-serif !important;
    position: absolute;
    text-shadow: 2px 2px #000;
    left: 17%;
}

.img-bg2 {
    padding: 330px;
    background: url('img1.jpg');
    background-size: cover;
    background-attachment: fixed;
}

.img-bg2  p {
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-size: 35px;
    font-family: Arial;
    text-shadow: 2px 2px #000;
    margin-top: -100px;

}

.content {
    height: 800px;
    background-color: #212121;
}

.content p {
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-size: 15px;
    font-family: Arial;
    margin-top: 30px;
}

.content2 {
    height: 900px;
}


#content {
    padding: 200px;
    background-color: #282829;
    color: #fff;
    text-align: center;
}

}

<强> HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="content"> 

<div class="content">
    <div class="img-bg">
        <p id='title'>  Established in 2004,  </p>
    </div>

    <p><strong><span id='span-one'style='color:#fff; font-size: 45px; font-family: Work Sans; text-shadow: 2px 2px #000;'> Lorem Ipsum is simply dummy tex</p>
</div>

<div class="content2">
    <div class="img-bg2">
        <p><strong><span id='span-two'style='font-family: Work Sans; color:#fff ; font-size: 2em; font-style: italic'></span></strong> Throughout the years NLM Marketing has established extensive relationships with the leading distributors that have helped propel many products in becoming household name brands. Our staff consist of professionals with extensive experience in the Meat, Dairy, Frozen, Deli and Seafood categories. NLM and its staff have become the link between Manufactures, Packers, Distributors and owners/managers of Key Retailers.</p>
    </div>
</div>

</div> 
</body>
</html>

为什么我在iPhone上的背景图像搞砸了，它们在浏览器上显得正常？

1 个答案: