如何将图片分成多个<div>？</div>

Question

我通过使用那个pictrure作为一个大div的背景来做到这一点，然后我在里面做了很多小div来覆盖整个div的区域，但我认为这看起来非常不专业。无论如何将图片划分为may div ??

Answer 1

是。试试background-position。

Answer 2

如果您的图片是：big_picture.png，并且它是100px x 100px，那么该解决方案的一个非常简单的示例是：

<div class="top"></div>
<div class="bottom"></div> 

的CSS：

div {
    width: 100px;
    height: 50px;
    background-image: url(big_picture.png);
}

/* will only reveal the top 50 pixels */
div.top {
    background-position: 0px 0px;
}

/* will only reveal the lower 50 pixels */
div.bottom {
    background-position: 0px -50px;
}

您可以在网格中清楚地将此应用于任意数量的div元素。