一张背景图片,多个 Div
One Background Image, Multiple Divs
我将用一系列图片来解释我的问题。
div 容器将具有以下背景图像:
在图像的顶部,会有像 divs:
这样的图块
我的目标是让背景图像只对图块可见,其余部分隐藏:
非常感谢任何帮助,谢谢!
像下面这样使用背景附件属性fiddle:
http://jsfiddle.net/1ovd3cnk/1/
每个图像块得到以下内容:
background-image: url(http://i.stack.imgur.com/fOV15.png);
background-attachment: fixed;
编辑:在行而不是容器上设置边距
抱歉这样的回复,我没有足够的声誉在其他评论中添加评论,但在之前的答案中添加一些内容:
移动的图像可以使用以下方法修复:
background-size: cover;
但请记住,旧浏览器不支持 cover
属性。
http://caniuse.com/#search=background-size
因此,如果您想要跨旧浏览器兼容性,我建议您尝试 javascript 并使用元素的宽度和高度进行一些数学运算,以调整背景图像的位置。
我将用一系列图片来解释我的问题。
div 容器将具有以下背景图像:
在图像的顶部,会有像 divs:
这样的图块我的目标是让背景图像只对图块可见,其余部分隐藏:
非常感谢任何帮助,谢谢!
像下面这样使用背景附件属性fiddle:
http://jsfiddle.net/1ovd3cnk/1/
每个图像块得到以下内容:
background-image: url(http://i.stack.imgur.com/fOV15.png);
background-attachment: fixed;
编辑:在行而不是容器上设置边距
抱歉这样的回复,我没有足够的声誉在其他评论中添加评论,但在之前的答案中添加一些内容:
移动的图像可以使用以下方法修复:
background-size: cover;
但请记住,旧浏览器不支持 cover
属性。
http://caniuse.com/#search=background-size
因此,如果您想要跨旧浏览器兼容性,我建议您尝试 javascript 并使用元素的宽度和高度进行一些数学运算,以调整背景图像的位置。