背景图片 + 滚动文本框的组合还有多种式样的滚动框

部落格

排列方式：

8月27日

背景图片 + 滚动文本框的组合

最近好多朋友问我“背景图片 + 滚动文本框怎么做？有没有简单点的方法”。那我就总结一下吧，首先说明，没有简单的方法，多少都有点麻烦，呵呵^_^

首先，给大家推荐一些背景图片：来自伊柔素材屋的 100个边框背景 (我的下面的两篇日志背景都是在这找的)，我想应该够了，不够的话大家在到 伊柔素材屋 或者 遐思素材屋 里去找吧。

选择好背景图片后，首先确定一下图片的宽度是多少：

如果宽度略小于你的日志宽度的话，用 table 方法；

如果图片宽度大于你的日志宽度的话，用 DIV 方法，(不知道自己日志宽度的点击这里查看)，下面分别讲述两种方法：

一、table 方法：

首先，将如下代码复制到日志的HTML代码里：

代码中蓝色部分是需要修改的，改成你的图片地址和图片高度(高度只需要换成数字即可，后面不需要加px)。

然后再将如下代码复制到<TD vAlign=top align=middle>与</TD>之间：

OVERFLOW: scroll; OVERFLOW-X: hidden;为设置"强制出现滚动条"和“屏蔽横向滚动条”的代码，不用修改
代码中深黄色的部分为滚动条的颜色，大家根据这个色板自行修改，不需要设置滚动条颜色的话，把; SCROLLBAR-FACE-COLOR:到SCROLLBAR-DARKSHADOW-COLOR: #85989c这一部分全都删掉即可
代码中，橙色left的为日志文字的对齐方式，left 表示居左对齐，center 表示居中对齐，right 表示居右对齐。

编辑好代码后，就可以点回<HTML>按钮编辑你的文字了。

二、DIV 方法：

当你选择的背景图片的宽度大于你的日志宽度时，用这个方法，操作如下：

首先，将如下代码复制到你的新日志的代码里：

代码中，白底红字的部分是需要修改的：

日志宽度都知道了吧？还不知道的看这个图
图片的新高度要注意了，这个高度是需要换算的，假如背景图片的原始大小是宽600，高300，而你的日志宽度是558，那么，图片的新高度就是558×300÷600=279，明白了吧？
图片地址不说了
文字内容的宽度和高度自定义
代码中，蓝色部分为滚动条的颜色，根据这个色板自行修改，不需要设置滚动条颜色的话，把; SCROLLBAR-FACE-COLOR:到SCROLLBAR-DARKSHADOW-COLOR: #85989c这一部分全都删掉即可
left 表示文字内容居左对齐，按你的需要可改为 center 和 right ，center 表示居中对齐，right 表示居右对齐。
同样，overflow:scroll; overflow-x:hidden; 为显示滚动条的代码，不需要修改

代码修改完毕后，回点<HTML>按钮进入普通编辑模式，双击文字所在的框，即可进入编辑文字。

基本上，就这两种方法，当然，代码的框架都可以根据小绿人的背景图片生成器来产生，但是，滚动条代码是要自己加的，考虑到好多初级用户不知道滚动条代码往哪加，所以我觉得还是把完整的代码给出比较好。

（各种样式的滚动文本框）

【演示】

这是测试文字