原文地址：From PSD to HTML, Building a Set of Website Designs Step by Step
翻译整理：西米CC
1.3 – 背景图片制作
至1.2为止，虽然长相比较困难，但至少页面的骨架是出来了。现在主要的元素已经定位好了，接下来我们先利用CSS进行一些初步的外观修饰，有了精美的图片素材，这项工作是相当简单的事情，你可以从素材压缩包里获取相应的图片。
我们要使用的第一张图片是相当巨的一张背景图，在上面我应用了简单的放射高光效果。在网页中设置背景的时候，我会在这张大图的两边平铺一张单像素切片，以实现背景区域扩展：
同样的我们也要为页脚设置一张背景图片，这张背景的顶部有一条边框分割线，以便浏览者更好的区分#main和#footer两块区域。页脚背景图片可以在素材压缩包里找到，我把它命名为background_footer。现在我们来改动之前的CSS样式，去掉原来的红色边框，并添加上刚刚所说的背景图像（CSS中背景图片的路径请根据具体情况修改——译者西米CC注）：
- @charset "UTF-8";
- /* Background-Styles */
- body {
- margin:0px; padding:0px;
- background-color:#131211;
- }
- #main {
- background:#c4c0be url(images/background_light_slice.jpg) repeat-x;
- }
- #main .container {
- background-image:url(images/background_light.jpg);
- background-repeat:no-repeat;
- min-height:400px;
- }
- #footer {
- background-image:url(images/background_footer.jpg);
- background-repeat:repeat-x;
- color:white;
- padding:40px;
- }
- .container {
- width:950px;
- margin:0 auto;
- position:relative;
- }
两个注意点：
1.设置背景图片有多种方式，在#main中我把背景的颜色、图片及其平铺方式用一条语句来定义，而在#main .container 和 #footer中则对每个属性使用了单独的语句。至于哪一种更好，废话啦…
2.因为我要将background_light.jpg设置为#main中
1.4 – 在浏览器中测试 别忘了在不同的主流浏览器中测试至今为止的页面效果，还算比较理想，下面就是IE7中的测试效果：
[ 以下内容您也可能感兴趣 ]
Add a Comment
