0

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

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

AA BB CC DD ...

A1 B1 C1 D1 ......

A2 B2 C2 D2 .......

UU XX YY ZZ ......

等等

其中 AA = 图标，A1=悬停，A2=活动。

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

。图标 {

高度：32px；

宽度：32px；

背景图片:url('/img/slbuttons.png');

}

.AAicon {背景位置：0px 0px;}

.BBicon {背景位置：-32px 0px;}

.CCicon {背景位置：-64px 0px;}

ETC...

我正在寻找的是让它更简单，图标的大小不会改变（32 * 32），所以我不想手动编写每个不同的图标，我只想引用那个 ex。：

AAIcon = x0,y0, BBIcon = x1,y0, CCIcon=x2,y0 A1Icon = x0,y1 等等。

而不是我必须自己坐下来写每个 32,64,96,128 等 - 是否可以制作 (xpos=gridcount*32, ypos=gridcount*32) ？

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

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

我根本不是 CSS 或 WEB 开发方面的专家，所以它可能很容易。

4

2 回答 2

1

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

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

第二种选择是使用 JavaScript，对于初学者来说，jQuery 可能是最简单的选择。<script src="js/jquery.js"></script>使用类似（或 Google CDN）之类的工具包含 jQuery 源代码后，除了标准 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

于 2013-08-04T12:47:12.160 回答
0

是的你可以！通过使用 css 预处理器，您可以进行数学运算、变量等等。两个流行的是 SASS 和 LESS。SASS 获得了很大的吸引力，并且是我使用的。这是它的一个很好的概要。

http://css-tricks.com/video-screencasts/88-intro-to-compass-sass/

使用 css 预处理器，您可以完全按照您的要求进行操作。祝你好运！享受更简单的 CSS！

于 2013-08-04T05:50:45.367 回答