memo.xight.org

日々のメモ

背景画像に透過GIFを利用して，背景の更新を楽にする

Posted on | Tagged :

Summary

背景画像に透過GIFを利用することで，
背景色を変えるだけで様々なパターンのデザインが利用できるようになる．

CSS

body {
	background: #fa0 url(stripe_1px.gif);
}


Sample

斜線 (1px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample01.html

斜線 (2px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample02.html

市松模様 (1px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample03.html

市松模様 (2px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample04.html

ストライプ (1px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample05.html

ストライプ (2px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample06.html

Reference

Super Stripes
http://webdesign.maratz.com/lab/superstripes/

Lucky bag::blog: 背景画像に使える透過 GIF
http://www.lucky-bag.com/archives/2006/09/background-patterns.html