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

问题描述

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

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

我想将精灵表的大小从 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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）