【问题标题】:Background-attachment: fixed image fluid to a certain point背景附件:将图像流体固定到某个点
【发布时间】:2014-05-01 09:11:31
【问题描述】:

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

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

你可以看到我在说什么here

【问题讨论】:

  • 请详细说明,期望的行为是什么?
  • 我希望这张图片是流畅的。就像现在一样,当我将浏览器调整到最窄点时,我看不到整个图像,只剩下桌子,没有我:]

标签: html css fixed background-attachment fluid-images


【解决方案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;
 }

并从您的代码中删除“我”类,这对您来说应该是流畅的。问题是您将背景设置在“我”上,它不包含任何内容,并且它的高度仅由您设置为“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,因为它们为响应式网格提供了出色的库。

【讨论】:

  • 谢谢,我试过了,但没有用。这里是link
  • 好吧,让我们尝试一下其他方法,这样您希望图像在调整浏览器大小时始终保持全尺寸?
  • 在调整页面大小时尝试保持图像全尺寸的唯一问题是,如果视图的高度大于图像的大小,则底部可能会有一些空白空间你没事吧?
  • 编辑了我的答案,如果这是你想要完成的,请告诉我
【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-02
    • 1970-01-01
    • 2015-09-01
    • 1970-01-01
    • 2013-05-12
    相关资源
    最近更新 更多