我将通过一系列图像来解释我的问题。
一个div容器将拥有以下背景图片：
在图片的顶部，会有类似瓷砖的div：
我的目标是使背景图片仅对瓷砖可见，其他部分隐藏：
非常感谢您的帮助，谢谢！
一个div容器将拥有以下背景图片：
在图片的顶部，会有类似瓷砖的div：
我的目标是使背景图片仅对瓷砖可见，其他部分隐藏：
非常感谢您的帮助，谢谢！一个背景图片，多个Div元素
3
- nickruggiero
3
我喜欢看到人们费尽心思地避免使用<table>，结果却要付出10倍的努力才能得到一个表格。 - technosaurus
瓷砖将是响应式的，因此当瓷砖重新排列时，背景将保持静态。这就是为什么瓷砖显示一个一致的图像。 - nickruggiero
1我猜这回答了你的问题。[https://dev59.com/imMl5IYBdhLWcg3wAC6h][1] - imnancysun
2个回答
12
像下面这个 jsfiddle 中使用 background-attachment 属性：
http://jsfiddle.net/1ovd3cnk/1/
每个图像块都得到以下属性：
background-image: url(http://i.stack.imgur.com/fOV15.png);
background-attachment: fixed;
编辑：在容器上设置边距，而不是在行上设置。
- dfperry
3
太棒了。我想指导 OP 使用 background-clip，但是我无法让它起作用 :D - ffflabs
请注意，背景图像将根据容器距窗口左上角的距离而“移位”：http://jsfiddle.net/yo66c2gw/ - Patrick Evans
是的，这只是展示如何使用该属性来获得所需效果，而不是完整的解决方案。 - dfperry
1
抱歉以这种方式回复，我没有足够的声望在其他评论中添加评论，但对早期答案进行一些补充：
但请记住，在旧版浏览器中，不支持“cover”属性。 http://caniuse.com/#search=background-size 因此，如果您想要跨越旧版浏览器的兼容性，我建议您尝试使用JavaScript，并根据元素的宽度和高度进行一些数学计算以调整背景图像的位置。
可以使用以下方法解决图像位移问题：
background-size: cover;
但请记住，在旧版浏览器中，不支持“cover”属性。 http://caniuse.com/#search=background-size 因此，如果您想要跨越旧版浏览器的兼容性，我建议您尝试使用JavaScript，并根据元素的宽度和高度进行一些数学计算以调整背景图像的位置。
- Júlio Gori Corradi
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接