修改

Question

我的背景图像仅在某一点上流畅。调整浏览器大小时，它开始缩小

background-image : url("http://...");
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
height: 400vh;

你可以看到我在谈论here

Answer 1

高度：400vh是你的问题我相信如果你可以将这段代码放在html元素上

 html { 
  background: url("http://...") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 }

并从您的代码中删除“me”类，这对您来说应该是流畅的。问题是你在“me”上设置背景，它不包含任何内容，它的高度仅由你设置为“400vh”所以一旦它达到那个高度它就会停止流动所以通过在html上设置它将包装整个页面并且流畅

修改

如果您希望无论如何都不要剪切图像并在每个屏幕上显示100％的图像，您可以执行以下操作

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto 0px;
}

将我的课程变成图像而不是div

<img class="me" src="http://24.media.tumblr.com/8760c4adc4f8c4b7cafa14c5cf6cc55c/tumblr_n2kq1hnFSF1tswi9io1_1280.jpg"></img>

和这样的css

.me { 
  width: 100%;
 }

这将为您提供一个覆盖100％个人屏幕大小的包裹，并允许您将图像设置为背景，并且不会在调整大小时剪切图像。如果您尝试使此网站响应，我不会建议您在CSS中使用绝对引用，因为这可能会导致某些项目在不同的屏幕尺寸上不合适。您可能需要查看www.getbootstrap.com，因为它们为响应式网格提供了一个出色的库。

Answer 2

click_hear_demo

<强> CSS

#wrap{
    display:block;
    width: 100%
   }
body {
    margin: 0 0;
    position: relative;
   }

.me { 
    background-image : url("http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2013/04/44GHz_image_1.jpg");
    background-repeat:no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center right;
    height: 400vh; /*cia su viewportais reikes padirbet, nes cia realiai procentai kaip ir*/
}

}

HTML

<body>
    <div id="wrap">
        <div class="me"></div>
    </div> <!-- end of #wrap -->
</body>

背景附件：将图像流体固定到某一点

2 个答案:

修改