【问题标题】:CSS background-attachment and sizeCSS背景附件和大小
【发布时间】:2015-09-13 14:07:12
【问题描述】:

我试图让我的图像在其容器内的页面滚动,但没有使其固定(我需要它随着滚动而上下移动,这样说:))。我已经知道将图像设置为背景并将背景附件设置为固定应该可以。像这样的:

example{
  width: 100%;
  height: 22.312%;
  background-image: url("img/eyepoker.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

首先 - 它不会产生谷歌向我承诺的效果。有什么建议?其次,有人可以告诉我这是否是将背景图像安装到其容器并完全实现此效果的最佳实践?

[编辑]:尽可能具体:问题是什么都没有发生。就像我从未添加背景附件规则一样。

【问题讨论】:

  • 发生了什么事?请更新您的问题以更具体。
  • 这是一个演示小提琴。它是否说明了问题? jsfiddle.net/isherwood/Lfg5pvmb
  • 我怀疑解决方案只是删除background-attachment 规则。 jsfiddle.net/isherwood/Lfg5pvmb/1
  • @isherwood 这不是问题,而是很酷的效果。我想要实现的是滚动页面时滚动的背景,但包含它的 div 应该正常滚动并消失在浏览器的地址栏后面。但是,它完全没有任何作用。

标签: html css background-image background-attachment


【解决方案1】:

我建议使用 background-size:cover;

#example {
    width: 100%;
    height: 22.312%;
    min-width: 120px;
    min-height: 80px;
    background-image: url("http://lorempixel.com/1200/800/nature");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 400px 0;
}

http://jsfiddle.net/0r61obph/

【讨论】:

  • 这是一个很棒的效果,我很高兴我也学会了,但我需要整个图像在 div 中可见(就像那些 wordpress 主题中的滑块图像,或“号召性用语” " image) 并且当我向上滚动时,图像看起来像是在向下滚动,但仅在包含它的 div 内。提到的 div 应该正常滚动...
  • 你能添加一个你正在寻找的效果的例子吗?
  • 最近在一个网站上看到了这个效果,其实是一个网页设计工作室的网站,但是我追不上去。类似于developer.mozilla.org/samples/cssref/background-attachment.html,但图像的滚动速度似乎比实际滚动速度慢。也许是一些js,我不知道......
  • 那么可能是Javascript。
  • 如果不麻烦,请告诉我,如果我删除了 min-width 和 min-height 属性,是什么让图片在浏览器中消失了?这么说不就是“底部限制”吗?
猜你喜欢
  • 2014-05-27
  • 1970-01-01
  • 1970-01-01
  • 2013-05-12
  • 2011-12-27
  • 2015-06-03
  • 2014-09-19
  • 1970-01-01
  • 2012-10-13
相关资源
最近更新 更多