CSS背景＆＃34;封面＆＃34;页面重新加载后无法正确显示

时间：2014-05-16 16:20:29

标签： html css css3

我试图将图片背景放在全屏div中。

什么工作：

  1. 在浏览器中加载代码
  2. 重新加载页面
  3. 背景应正确显示

    4. 问题：

    1. 在Chrome浏览器中加载代码
    2. 确保页面向下滚动
    3. 重新加载页面
    4. 背景被破坏

      5. 我不会使用<html>标签，因为我需要交换背景并执行会破坏html的动画。 

      <!DOCTYPE html>
<html>
<head>
  <style>
    html, body, #background { height:100%; margin:0px; }

    #background{
        width:100%;
        top: 0;
        position: fixed;
        background: url(http://lorempixel.com/400/200/sports/) no-repeat center center #fc0;
        background-size: cover;
        background-attachment: fixed;
        z-index: -1;
    }

    #content { background: #0cf; width:400px; height:2000px; margin: 0 auto; }
  </style>
</head>
<body>
  <div id="background"></div>
  <div id="content">The content</div>
</body>
</html>

      请注意我没有使用JSfiddle来测试我们实际需要重新加载页面的行为。

      这里有一些图片，抱歉我的回复延迟了！

      1）以下是我第一次加载页面时发生的事情

      When I first load the page

      2）当我向下滚动

      When I scroll down

      3）如果，当我的滚动条关闭时，我重新加载页面，我得到了这个！

      On page reload

1 个答案:

答案 0 :(得分：0)

默认情况下背景图像会失真，因为背景图片非常小400 x 200 px。

重新加载页面时我没有看到任何差异，只是图像正在变化。

拥有更好的分辨率图像，以避免在更大的屏幕中出现失真

enter image description here

相关问题
最新问题