CSS Sprite - 我可以用某种方式在 CSS 中做简单的数学运算吗？

Question

我使用一个包含我所有图标的图标表，现在在我的 CSS 中引用它们。

每个图标都是 32*32 并且在这样的网格中:

AA BB CC DD ...

A1 B1 C1 D1 ......

A2 B2 C2 D2 .......

UU XX YY ZZ ......

etc.

其中 AA = 图标，A1 = 悬停，A2 = 事件。

它工作正常，现在在 CSS 中是这样的:

.icon {

height:32px;

width:32px;

background-image:url('/img/slbuttons.png');

}

.AAicon {background-position:0px 0px;}

.BBicon {background-position:-32px 0px;}

.CCicon {background-position:-64px 0px;}

等...

我正在寻找的是以某种方式使它更简单，图标的大小不会改变 (32*32) 所以我不想手动编写每个不同的图标，我只想引用那个 ex。 :

AAIcon = x0,y0, BBIcon = x1,y0, CCIcon=x2,y0 A1Icon = x0,y1,etc.etc.

我不必坐下来自己写每个 32、64、96、128 等 - 难道不能制作一个 (xpos=gridcount*32, ypos=gridcount*32) 吗？

我想要这个的原因是我只是改变了我的图标包大小然后我必须再次重写所有这些值，每个 block 图标/悬停/事件实际上是相同的除了坐标，将是一个很大的帮助如果我可以有一个定义大小的全局变量，然后它会自动用于稍后调整定位。

不知道我是否可以在 CSS 中做到这一点，也许那是 CSS3 还是？

我根本不是 CSS 或 WEB 开发方面的专家，所以这可能很简单。

Answer 1

在纯 CSS 中，不，你不能做数学。它严格来说是一种样式语言。在动态设置页面样式时，有几个选项。

您可以使用 SASS 和 LESS，它们是它们自己的语言，通过处理器运行(SASS 使用 Ruby，LESS 使用 JavaScript)来生成样式表。

第二种选择是使用 JavaScript，对于初学者来说，jQuery 可能是最简单的选择。使用类似 <script src="js/jquery.js"></script> 的方式包含 jQuery 源代码后(或者 Google CDN)，除了标准 JavaScript 之外，您还可以自由使用 jQuery 库。

获取图像高度的简短代码段:

<script>
var imgHeight = $('.icon').height(); //remove the height and width from your CSS first!
var imgWidth = $('.icon').width();
</script>

然后您可以使用 jQuery 根据背景图片的高度动态地操作 CSS:

<script>
var iconA = $('.AAIcon');
iconA.css('background-position','imgHeight');
</script>

jQuery