背景画像に使う素材は透過pngか透過gifにした方が良いと思う。その理由とは | Garney.Web

背景画像に使う素材は透過pngか透過gifにした方が良いと思う。その理由とは

スポンサーリンク

20150325_1

単純な背景画像に使う素材なら全部gifでいいんじゃね?とか、にわかなもんだから思ってたんですが。そうでもないな・・って言うか「こんな単純な落とし穴にはまります?」的な穴にはまってしまったので、反省しているしだい。俺反省。てh(ry
あ、穴にハマったって言っても、そんなに深く無いです。どうでもいいね。

どういうことかというと

20150325_2

背景に使うなら全ての場合ではないけども、透過のpngか透過のgifを使うようにしたほうが、長い時間で見ると更新が楽になる可能性があるかなと思ったのです。

例えば・・・

こんーなHTMLと

<body>
 <div id="wrapper">
   <div class="content">
     <ul>
         <li>test1</li>
         <li>test2</li>
       </ul>
   </div>
 </div>
</body>

こんーなCSSがあったとして。(適当すぎるとか言わないで。

#wrapper {
    background-color:#fff
}

#wrapper .content ul li{
    background-image:url(img/test.gif);
    background-position:left center;
    background-repeat:no-repeat;
    padding-left:20px;
}

このtest.gifのマッド部分が白色だとすると、現状はこれで問題ありません。うん。#wrapperの背景が白色に指定しているからですね。

ただ、今後更新を依頼された時や、自分のサイトの更新時に#wrapperの背景を変えるなんてことになると、白色背景ありきで書き出していた、test.gifも書き出し直しになってしまう。
例えば、白じゃなくて黒に変更したという場合(実際はこんなに極端な色変更はないかと思いますけど。地味ーに変わる程度かな。)白色マッドを引いて書きだしたtest.gifも黒色マッドにして書き出し直しになります。

これって面倒です。今はテストコードなので、test.gif一枚の画像でしかないですが、これが沢山あると・・「はぁぁあ」ってため息でますなぁ。

デモを用意してみました。

こっちが正常です。

  • test1
  • test2

こっちが透過pngあるいは、透過gifにせずに背景を変更した例です。

  • test1
  • test2

黒背景の方は、背景画像に指定しているgifの白マッド部分が見えてるでしょう。この黒背景に合わせて、背景画像に指定しているgifを書き出し直さないといけないですね。

なので、backgroundプロパティで背景画像を指定するときは、透過のpngか透過のgifを使ったほうが、後からの更新のことを考えると良いかなと思うのでした。

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法