【原创】用长条背景图的简单信纸
发表于2010年12月14号 11点 阅读 6285 评论44 点赞6 ©著作权归作者所有
摘要：这里的12款背景信纸是利用“背景信纸（二）”的源代码所做的练习。上下背景图都用了长条图，宽度大多为960px，可以应付不同宽度的博客环境。上图还做了一些变化，如加入渐变的背景、加入Flash等。
简单信纸_201_复制开始
|
文字从这里开始写
信纸_201和信纸_202的下表用了同一张图，这是杭州西湖从湖滨看过去的全景长卷图，宽1660px*高180px。利用 background-position 的不同设置，分成了两张不同的信纸。
信纸_201： background-position: left bottom;
|
|
简单信纸_201_复制结束
简单信纸_202_复制开始
|
文字从这里开始写
信纸_201和信纸_202的下表用了同一张图，这是杭州西湖从湖滨看过去的全景长卷图，宽1660px*高180px。利用 background-position 的不同设置，分成了两张不同的信纸。
信纸_202： background-position: right bottom;
|
|
简单信纸_202_复制结束
简单信纸_203_复制开始
|
文字从这里开始写
信纸_203和信纸_204的下表用了同一张图，这是草原风情的的长卷图，1480px*高200px。利用 background-position 的不同设置，分成了两张不同的信纸。
信纸_203： background-position: left bottom;
上图的天空显得单调，加了个鹰的flash和移动的背景相配。
|
|
简单信纸_203_复制结束
简单信纸_204_复制开始
|
文字从这里开始写
信纸_203和信纸_204的下表用了同一张图，这是草原风情的的长卷图，1480px*高200px。利用 background-position 的不同设置，分成了两张不同的信纸。
信纸_204： background-position: right bottom;
上图的天空显得单调，加了个鹰的flash和移动的背景相配。
|
|
简单信纸_204_复制结束
简单信纸_205_复制开始
简单信纸_205_复制结束
简单信纸_206_复制开始
简单信纸_206_复制结束
简单信纸_207_复制开始
简单信纸_207_复制结束
简单信纸_208_复制开始
简单信纸_208_复制结束
简单信纸_209_复制开始
简单信纸_209_复制结束
简单信纸_210_复制开始
简单信纸_210_复制结束
简单信纸_211_复制开始
|
文字从这里开始写
竹的题材不容易做成背景信纸，因此这里用了竹的截图，而且在上图的下面加了条横线。这线并不是PS做成，而是作为上表（table）的下边框线。
单独设置边框的一条边，要用CSS声明，如本例：
style="border-bottom:2px #6C7C82 solid"
如何使用，请参考习之的博客“给照片加个实体边框”。
|
|
简单信纸_211_复制结束
简单信纸_212_复制开始
简单信纸_212_复制结束
音乐：柴可夫斯基 -- 船歌
(注：您的设备不支持flash)
