文字の背景に画像を入れる

しべっち うちの素材って加工禁止なんだよね。

ざくろん うん。そうだよ。

しべっち 文字入れしたい場合とかはどうすればいいかな。

ざくろんスタイルシートを使うとできるよ。

サンプル

サンプル

↓ この画像を使用しています ↓

タグ

<DIV style="background-image : url(背景にしたい画像の場所);width : 画像の横の長さpx;height : 画像の縦の高さpx;" align="center">入れたい文字</DIV>

補足

画像に対して文字が上に寄り過ぎだという時は内側の上部に余白を作ります。

サンプル


先ほどのタグにpaddingを追加します。

<DIV style="background-image : url(背景にしたい画像の場所);width : 画像の横の長さpx;height : 画像の縦の高さpx;padding-top : 空けたい余白px;background-repeat : no-repeat;" align="center">入れたい文字</DIV>


padding-top 上の余白
padding-right 右の余白
padding-bottom 下の余白
padding-left 左の余白

余白を開けた分、DIV枠が大きくなって背景が繰り返されてしまう場合があるので

background-repeat : no-repeat

で背景を繰り返さないようにしておきます。




文字を左寄せにした場合など、左の余白を開けることもできます。

左余白

よければお試しください♪

Howto Topへ

inserted by FC2 system