博客

最近做了一个项目，jsp页面的背景图片总是考虑它的大小，麻烦死了。结果去网上搜索了一种很好的方法，拿来和大家分享一下

1. 
   <
   
   %@ page
   
   language
   
   =
   
   “java”
   
   
   contentType
   
   =
   
   “text/html”
   
   
   pageEncoding
   
   =
   
   “utf-8”
   
   %
   
   >
   
2. 
   <
   
   
   html
   
   
   >
   
3. 
   <
   
   
   head
   
   
   >
   
4. 
   <
   
   
   title
   
   
   >
   
   背景
   
   </
   
   
   title
   
   
   >
   
5. 
   <
   
   
   style
   
   
   type
   
   =
   
   “text/css”
   
   
   >
   
6. body{
7. background-p_w_picpath: url(p_w_picpaths/4.jpg);
8. background-repeat: repeat-x;
9. }
10. 
    </
    
    
    style
    
    
    >
    
11. 
    </
    
    
    head
    
    
    >
    
12. 
    <
    
    
    body
    
    
    >
    
    
    </
    
    
    body
    
    
    >
    
13. 
    </
    
    
    html
    
    
    >
    

4.jpg的图片如下：

以上的这个蓝色的渐变条是图片4.jpg的图片，它是一个条。

运行结果：

背景图片变成了蓝色渐变的背景。

这个背景的实现归功于

1. 
   body{
   
2. 
   background-p_w_picpath: url(p_w_picpaths/4.jpg);
   
3. 
   background-repeat: repeat-x;
   
4. 
   }
   

url:寻找图片的路径

这个地方注意一下：




（p_w_picpaths/4.jpg）这个路径可能在有的同学的项目上不行，如果不能实现的话就改成：（../p_w_picpaths/4.jpg）

repeat: repeat-x: 将图片平铺。  从运行结果也能看出来，是将那个蓝色的条平铺在了整个网页上。

从这个平铺的角度可以看出用这个方法的好处。有些同学做的项目在win7系统下显示的很好，但是拿到了xp系统下就会出现网页背景花屏的现象，同样的，由于不同的电脑、不同的系统，会造成页面背景的效果变形。但是用了此方法后就不会出现这样的后果了，因为它是平铺的。

当然，除了repeat这个平铺的方法以外，还有很多其他的展开方式。