这是我遇到问题的网站:http://florin-pop.com/work/
正文具有以下 CSS:
body {
height:100%;
font-family: "Open Sans",sans-serif;
background-image: url("bg.jpg");
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
color: #333;
overflow: hidden;
}
如您所见,bg 大小被覆盖了,但是当用户在组合过滤器(例如 ALL、PSD->HTML/CSS、Animated ...)上导航时,这给我带来了一个小问题,因为容器在变化,背景图像也在变化,这让它看起来有点奇怪。
我怎样才能拥有覆盖属性(响应性)但在动画发生时否定背景变化?
我已经尝试将 cover
更改为 100%
但这也不对,因为它不会覆盖整个页面...
最佳答案
我会将图片的最小高度设置为其实际高度。
body
{
min-height: 1200px;
height:100%;
font-family: "Open Sans",sans-serif;
background-image: url("bg.jpg");
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
color: #333;
overflow: hidden;
}
关于javascript - 修复 jQuery 动画的背景问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31314873/