如果您希望标题图像调整大小以覆盖整个标题但又希望修复背景附件,则背景图像将不再覆盖包含div但将尝试覆盖整个窗口.
这是一个显示问题的小提琴.只需切换CSS第13行的推荐.当你改为
http://jsfiddle.net/TqQv7/155/
#top-left {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 50%;
background: #000 url('http://placekitten.com/2000/1000') no-repeat;
-moz-background-size: cover;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-color: transparent;
/* background-attachment: fixed; */
}
background-attachment默认为’scroll’.因此,通过“固定”注释,猫图片大小调整为左上方框的形状而没有问题但是“固定”猫背景保持固定到页面但猫图片大小则“覆盖”整个页面.
理想情况下,我想在这里重新创建标题：http://startbootstrap.com/templates/stylish-portfolio/index.html
但是标题设置为页面高度的50％.它在此示例中有效,因为标题是整页.
这似乎与标准兼容,因为所有现代浏览器看起来都是这样做但我无法理解它为什么会这样做？
解决方法
这是因为设置background-attachment：fixed会将背景定位区域更改为初始包含块的区域,该区域始终是视口的大小.从
spec：
If the ‘background-attachment’ value for this image is ‘fixed’,then [the ‘background-origin’ property] has no effect: in this case the background positioning area is the 07001 [CSS21].
然后相应地影响background-size：cover的行为.
你可以通过设置background-size：auto 50％而不是still achieve the desired behavior with a fixed background,所以它的高度可以缩放到页面的50％,镜像你给元素的高度,并且它的宽度按比例调整：
-moz-background-size: auto 50%; -webkit-background-size: auto 50%; -o-background-size: auto 50%; background-size: auto 50%;
请注意,我还将标准背景大小声明移到底部,以确保所有浏览器在非标准实现中使用该声明.
