1

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

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

你可以在这里看到我在说什么

4

2 回答 2

0

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>
于 2014-05-01T11:57:46.077 回答
0

高度：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;
 }

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

编辑

如果你希望你的图像不被剪裁并在每个屏幕上显示 100%，你可以做这样的事情

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

将 me 类变成图像而不是 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，因为它们为响应式网格提供了出色的库。

于 2014-05-01T09:36:13.607 回答