一个背景图像,多个分区

时间:2015-01-02 17:39:30

标签: javascript html css html5 css3

我将用一系列图片解释我的问题。

div容器将具有以下背景图像:

enter image description here

在图像的顶部,会出现像div这样的图块:

enter image description here

我的目标是让背景图片仅对瓷砖可见,其余部分隐藏: enter image description here

非常感谢任何帮助,谢谢!

2 个答案:

答案 0 :(得分:9)

使用background-attachment属性,如下面的小提琴:

http://jsfiddle.net/1ovd3cnk/1/

每个图像块都有以下内容:

background-image: url(http://i.stack.imgur.com/fOV15.png);
background-attachment: fixed;

编辑:在行上设置边距而不是conatiner

答案 1 :(得分:1)

很抱歉这样的回复,我没有足够的声誉在其他评论中添加评论,但在早期答案中添加了一些内容:

可以使用以下方法修正移位的图像:

background-size: cover;

但请记住,旧浏览器不支持cover属性。 http://caniuse.com/#search=background-size

因此,如果您想要跨浏览器兼容性,我建议您尝试使用javascript并使用元素的宽度和高度进行一些数学运算来调整de background图像位置。

相关问题