如何解决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 举报,一经查实,本站将立刻删除。