我的网页搭建中篇01——网页背景02.使用渐变色做网页背景

参考网页：

http://www.divcss5.com/jiqiao/j768.shtml 

http://www.w3school.com.cn/h.asp

<----------------------------------------------------------------------------------->

上节做到用半透明背景色来做网页背景，本节尝试用渐变色来做背景。

2.使用渐变色图片来做背景

（1）使用渐变图片

解决办法1：

直接使用完整渐变色图片来做。

<style type="text/css">

body{

background-image: url(BJ01.jpg);   

background-position:center top;   //这里也可以使用百分数

background-repeat: no-repeat;

}

</style>

 

效果图：

 


 

注意：

常常看到一些专题或形象网页，背景是一种非常大图片作为背景，而通常情况下宽屏和窄屏显示器都能显示铺满的全屏背景图片，就像图片能自适应宽度大小一样的。其实这种实现一样非常简单，将这张图片宽度美工设计足够大，比如市场上最宽显示屏分辨率宽度为2560像素，那么要让这样的宽屏显示器浏览此网页也能铺满全屏，那么你的这张背景图片就必须做成宽度大于或等于2560px宽度的，这样以来宽屏、窄屏显示器打开此网页都能铺满全屏，最小化、最大化、改变浏览器窗口打开背景图片都是全屏的居中的看上去就像背景图片自适应大小一样。

 

解决办法2：

使用裁剪成竖条的背景图

<style type="text/css">

body{

background-image: url(BJ01.png); //BJ01.png是PS出的一小列图像，与repeat-x结合使用   

background-position: left top;   //这里也可以使用百分数

background-repeat: repeat-x;

background-attachment: fixed;

}

</style>

 

BJ01.png是使用PS裁剪成的一众列载渐变背景图。

 


效果图如下：

 


<----------------------------------------------------------------------------------->

有点小冷啊！come on！