仅使用css从精灵表中拉伸div中的部分图像

Question

我有一个1x5的div并从精灵表中获取一个嵌入的图像。我想在更大的div区域重复或扩展这个div。有没有css唯一的方法来做到这一点？或者它需要javascript吗？

Answer 1

您可以使用CSS转换将其展开

<style>
    #outerDiv {
        height: 320px;
        width: 800px;
    }
    #innerDiv {
        height: 32px;
        width: 160px;
        background-image: url('images/mysprite.png');
        background-position: 32px 64px;

        transform-origin: top left;
        transform: scale(5, 10);
    }
</style>

用于HTML

<div id="outerDiv">
    <div id="innerDiv"></div>
</div>

只需根据您的需要调整比例。