0

すべてのアイコンを含むアイコンシートを使用しており、CSS でそれらを参照しています。

各アイコンは 32*32 で、次のようなグリッドになっています。

AA BB CC DD ...

A1 B1 C1 D1 ......

A2 B2 C2 D2 .......

うぅ XX YY ZZ ……

等

AA = アイコン、A1 = ホバー、A2 = アクティブ。

それは問題なく動作します。CSS では現在、次のようになっています。

.アイコン {

高さ:32px;

幅:32px;

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

}

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

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

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

等...

私が探しているのは、どういうわけかそれをもう少しシンプルにすることです.アイコンのサイズは変わりません（32 * 32）ので、さまざまなアイコンをそれぞれ手動で書くのではなく、その例を参照したいだけです. :

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 を使用) を介して実行して、スタイルシートを生成できます。

2 番目のオプションは JavaScript を使用することです。初心者にとっては、おそらく jQuery が最も簡単なオプションでしょう。など (または代わりに Google CDN) を使用して jQuery ソースを含めたら<script src="js/jquery.js"></script>、標準の 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 の 2 つです。SASS は多くの注目を集めており、私が使用しているものです。ここにそれの素晴らしい概要があります。

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

CSS プリプロセッサを使用すると、まさにあなたが話していることを行うことができます。幸運を！そしてより簡単なcssをお楽しみください！

于 2013-08-04T05:50:45.367 に答える