Question

我正在尝试在网格中排列的多个div上使用单个背景图像。请参阅下面的链接和图片。虽然我在所有background-attachment: fixed; div上使用.box-icon的方法会产生预期效果，但我还必须使用background-size: cover;来确保它始终覆盖所有.box-icon s似乎cover整个文档，而不仅仅是框中占用的区域，这使得它看起来很难看（见截图）。调整页面宽度或缩放，演示了我在说什么。

是否有更好的方法cover所有.box-icon个单一背景，只有覆盖那个小区域，并且不会爆炸图片？ CSS / jQuery / javascript解决方案都被接受了！

这是link to my website;相关文件为./css/style.css和./home.html。

我有JSFiddle example here。尝试调整查看器窗口的大小以查看。还要注意滚动时背景图像是如何出现的：（

我有album of example screenshots here。每次背景都会改变，而其他图像则更好地显示出丑陋的爆炸性。

Answer 1

明确指定背景大小会起作用。

http://jsfiddle.net/derrickmv/snw9j7wf/

.box-icon {
        background-size: 210px 420px;
        background-image: url('http://i.imgur.com/LGKO1Zm.jpg');
        background-repeat:no-repeat;
        background-position: inherit;
        background-attachment: fixed;
        margin: 0 auto;
        height: 100px;
        width: 100px;
        border: 2px solid red;
        z-index: 5;
        display: inline-block;
    }

基本上，沿着每个盒子大小的总和调整背景图像的大小。（希望我有道理）

跨越多个div的背景图像

1 个答案: