为页面上的多个div容器调整1个背景图像的大小

Question

我有一个超级精美的背景图片需要扩展为一页上3个盒子的背景，100％高度/宽度。这可能吗？

不要将1个背景缩放为整个页面背景。

但是

|方框1（50x50）获得背景| |方框2（20x20）获得背景|等

我想将“背景”类分配给所有这些div，并使用一个背景图像，根据div的尺寸进行缩放。它是一个正方形，如果它看起来有点扭曲就可以了。

仅供参考 - 这是一个面板页面drupal布局。

Answer 1

我不知道您的浏览器限制，但有一个名为background-size的CSS3属性。您只需将其设置为background-size: 100% 100%。

Answer 2

.background img {
    height: 100%;
    width: auto;
}

这将使图像拉伸到适合div高度@ 100％高度＆amp;宽度自然缩放：自动。