Css精霊図(雪碧図)画像サイズ表示
6196 ワード
Webプロジェクトで使用されるJQueryフレームワークは、プロジェクト時間が長くなり、画像が蓄積されると、約200個の画像があり、ネットワークリクエスト数とロード時間を減らすために、プロジェクトは統一的に整備され、小さなアイコンを精霊図(雪碧図)にすべて置く.
200以上の小さなアイコンは、UIデザイナーにとって、どれだけ大きいか分からないが、ネット上で小さなアイコンを雪碧図に統合するツールを探した.ツールリンク:https://www.toptal.com/developers/css/sprite-generator
スプライト図を合成した後、最も重要な仕事が来て、プロジェクトの中のjpgあるいはpngを導入する場所を、スプライト図の方式に変えて修正します.
ネットで半日探して、他のvueプロジェクトも見ましたが、だめでした.
vueプロジェクトではツールpostcssを使用してcssの処理を行うことができます.最終的なコードは以下の通りです.
@define-mixin sprite $viw, $vih, $riw, $rih, $rix, $riy, $rpw: 452, $rph: 547 { width: bpcalc($viw); height: bpcalc($vih); background-image: url(../../../static/assets/csss.png); background-repeat: no-repeat; background-size: bpcalc(($viw * $rpw)/$riw) bpcalc(($vih * $rph)/$rih); background-position: -bpcalc(($viw * $rix)/$riw) -bpcalc(($vih * $riy)/$rih); },
対応しているのはJQueryで、私はこのツールを使うことができるものを探していません.
苦しい自分で何とかするしかない.
最初は特に意味を理解していなかったが、background-sizeが対応しているのは画像のページ上の大きさだと思っていたが、結果は全く違っていて、前の認識をすべて否定し、すべてを再開した.
私は対応する関数を書いて結果を処理しました.関数は次のとおりです.
それぞれの対応する$rpw/75は類似しており、pxをremに変換することであり、異なるプロジェクトの変換が異なり、変換しなくてもよく、返された結果はpxで受け入れられる.
一例(単位:px)を挙げると、アイコンiconAの場合、設計図に実際に表示されるサイズは20*30であり、スプライト図のサイズは実際には40*60であり、スプライト図の全体のサイズは1000*1000であり、実現原理は、まずスプライト図を縮小し、縮小倍数は幅:20/40、高さ30/60であり、対応するbackground-sizeの値はスプライト図全体のサイズを表し、background-positionの値は、このアイコンのスプライト上の座標を表します.
200以上の小さなアイコンは、UIデザイナーにとって、どれだけ大きいか分からないが、ネット上で小さなアイコンを雪碧図に統合するツールを探した.ツールリンク:https://www.toptal.com/developers/css/sprite-generator
スプライト図を合成した後、最も重要な仕事が来て、プロジェクトの中のjpgあるいはpngを導入する場所を、スプライト図の方式に変えて修正します.
ネットで半日探して、他のvueプロジェクトも見ましたが、だめでした.
vueプロジェクトではツールpostcssを使用してcssの処理を行うことができます.最終的なコードは以下の通りです.
@define-mixin sprite $viw, $vih, $riw, $rih, $rix, $riy, $rpw: 452, $rph: 547 { width: bpcalc($viw); height: bpcalc($vih); background-image: url(../../../static/assets/csss.png); background-repeat: no-repeat; background-size: bpcalc(($viw * $rpw)/$riw) bpcalc(($vih * $rph)/$rih); background-position: -bpcalc(($viw * $rix)/$riw) -bpcalc(($vih * $riy)/$rih); },
対応しているのはJQueryで、私はこのツールを使うことができるものを探していません.
苦しい自分で何とかするしかない.
最初は特に意味を理解していなかったが、background-sizeが対応しているのは画像のページ上の大きさだと思っていたが、結果は全く違っていて、前の認識をすべて否定し、すべてを再開した.
私は対応する関数を書いて結果を処理しました.関数は次のとおりです.
/*
* $viw
* $vih
* $riw
* $rih
* $rix x
* $riy y
* $rpw
* $rph
* */
function sprite($viw, $vih, $riw, $rih, $rix, $riy, $rpw, $rph){
var w = $viw / $riw;
var h = $vih / $rih;
var bg_widsize = (w * $rpw / 75).toFixed(2);
var bg_heisize = (h * $rph / 75).toFixed(2);
var bg_widposi = (w * $rix / 75).toFixed(2);
var bg_heiposi = (h * $riy / 75).toFixed(2);
Utils.Console.log('background-size:'+bg_widsize + 'rem ' + bg_heisize + 'rem;' + 'background-position:-' + bg_widposi + 'rem -' + bg_heiposi + 'rem;');
return 'background-size:'+bg_widsize + 'rem ' + bg_heisize + 'rem;' + 'background-position:' + bg_widposi + 'rem ' + bg_heiposi + 'rem;';
}それぞれの対応する$rpw/75は類似しており、pxをremに変換することであり、異なるプロジェクトの変換が異なり、変換しなくてもよく、返された結果はpxで受け入れられる.
一例(単位:px)を挙げると、アイコンiconAの場合、設計図に実際に表示されるサイズは20*30であり、スプライト図のサイズは実際には40*60であり、スプライト図の全体のサイズは1000*1000であり、実現原理は、まずスプライト図を縮小し、縮小倍数は幅:20/40、高さ30/60であり、対応するbackground-sizeの値はスプライト図全体のサイズを表し、background-positionの値は、このアイコンのスプライト上の座標を表します.