css - CSS Sprite-Sheet 在行 col 中使用 var calc 调整大小以适应 sprite

Question

我无法知道这些变量的实际值。

另外我不确定我的代码是否正确。

我想将精灵表 1536x128 调整为 384x32 并将这个大小调整为精灵。

将 var、calc、parseInt 与 Col > X > Width 和 Row > Y > Height 的系统一起使用。

但是不行，全部用代码解释：

:root {
    /* image sprite sheet */
    --sheet_width: 1536px;
    --sheet_height: 128px;
    /* one sprite in this sheet */
    --sprite_width: 128px;
    --sprite_height: 128px; 
    /*
        Sprite sheet can contain 12 sprits on width 128x12=1536
        Debug css value before cal are not possible for me ! (i work on notepad++)
        normaly nb_col =  12 > (1536px / 128px) > 12px ? > parseint > 12 ?
        normaly nb_row =  0 > (128px / 128px) > 1px ? > parseint > 1 ?
    */
    --nb_col: parseInt(calc(var(--sheet_width) / var(--sprite_width)));
    --nb_row: parseInt(calc(var(--sheet_height) / var(--sprite_height)));       
    /*
        I want transform sprite sheet for 32x32 sprites
        So i defined it with variables
    */  
    --content_width: 32px;
    --content_height: 32px;
    /*
        And i calculate the new size of my sprite sheet
        new width 32 * 12 = 384px ?
        new height 32 * 1 = 32px ?
    */
    --sheetcontent_width: calc(var(--content_width) * var(--nb_col));
    --sheetcontent_height: calc(var(--content_height) * var(--nb_row));
    /*
        for finish what i want, i use variable for store
        the value to define my background-size
        --content_resolution = background-size: 384px 32px ?
    */
    --content_resolution: var(--sheetcontent_width) var(--sheetcontent_height);
}
.spritebox {
    background: url("buttons.png");
    display: block;
    width: var(--content_width);
    height: var(--content_height);  
    background-repeat: no-repeat;
    background-size: var(--content_resolution);
    
}
.spritebox.spriteblock_00 {
    background-position: calc(-1 * var(--content_width) * 0) top;   
}
.spritebox.spriteblock_01 {     
    background-position: calc(-1 * var(--content_width) * 1) top;
}
.spritebox.spriteblock_02 { 
    background-position: calc(-1 * var(--content_width) * 2) top;
}

<div class="spritebox spriteblock_00">00</div>
<div class="spritebox spriteblock_01">01</div>
<div class="spritebox spriteblock_02">02</div>

标签： cssresizerowsprite-sheetcol