仅使用 css 将精灵 sheet 的图像的一部分拉伸到 div

Question

我有一个 1x5 的 div 并从精灵 sheet 中获取嵌入图像。我想在更大的 div 区域重复或扩展此 div。是否有 css-only 方法可以做到这一点？还是需要 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>

根据需要调整比例即可。

仅使用 css 将精灵 sheet 的图像的一部分拉伸到 div

Stretching part of an image from a sprite sheet across a div using only css

html

css

sprite