インボックス内にラスター画像を配置

目次(クリックでジャンプ)

単純に貼り付け

Illustratorから直接出力したPNGをインボックスに貼り付ける。

画像のサイズは107*96。上のものは<img>タグ内のwidth=”107″に、下のものはwidth=”53″に設定。

styleでposition:absolute;を設定し、上はtop:0;left:0;を、下はbottom:0;right:0;を設定

図1:

全120g

(15%)

塩18g

説明書き

画像の内容や位置を含めてCSSに記述しておけば、htmlではクラス指定したdivをおけば良いだけで、大きさや位置の変更はインラインで行えるし、一番自由が効くやり方。

background-imageとして:url(～画像のアドレス～);を指定

繰り返されないように、background-repeatに:no-repeat;を指定

真ん中に配置するなら、background-positionに:center;を指定し、細かい指定は:(左からの位置) (上からの位置);で行う(%,px,em)

集合算の図のように決まった大きさの図を100%で表示する場合はこれで良さげだ

疑似要素として貼り付ける場合、インラインでの修正が効かないのが使いづらい(バリエーションとしてCSSで記述しておかないといけない)

beroreやafter要素のcontentとして:url(～画像のアドレス～);を指定すればOK

ただ、画像のサイズを変えられないらしい(サルワカさん)

transformでなら変えられそう

指定が色々面倒くさい！