网站地图    收藏   

子栏目

主页 > 前端 > css教程 >

css设置body背景图片随内容增加多少显示多少

来源：未知    时间：2014-10-30 10:04 作者：xxadmin 阅读:次

[导读] css 设置body背景图片随内容增加多少显示多少经验篇 在CSS布局时，可能有时会遇到对body直接设置图片作为网页背景水平纵向平铺（从上到下居中平铺），此时整个网页无论内容是否占满...

css设置body背景图片随内容增加多少显示多少经验篇

在CSS布局时，可能有时会遇到对body直接设置图片作为网页背景水平纵向平铺（从上到下居中平铺），此时整个网页无论内容是否占满一屏幕，css背景都会从上到下铺（纵向）满整个屏幕。但有时我们不需要这样的一个效果，需要内容占用多高，body背景就纵向从上到下铺满多少高度。很明显这样就达不到我们想要的效果。

解决方法：
对html再设置个背景（无论图片还是纯色，推荐设置纯颜色的背景颜色）

接下来DIVCSS5通过实例为大家介绍此技巧，首先DIVCSS5分为两个案例，一个是直接对body设置背景图片从上到下平铺，我们会观察到无论网页内容是否占满一屏幕，背景都会从上到下满铺。

一、未解决背景纵向平铺CSS DIV案例   -   TOP

1、DIV CSS案例描述
首先对body设置一个背景图片（bg.gif）从上到下平铺，设置一个div盒子宽度为274px,高度为200px;div背景颜色为蓝色。

2、案例HTML源代码：



    
	
  1. 
		<!DOCTYPE html> 
    2. 
	
  2. 
		<html> 
    3. 
	
  3. 
		<head> 
    4. 
	
  4. 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
	
  5. 
		<title>CSS案例 在线演示 DIVCSS5</title> 
    6. 
	
  6. 
		<link href="images/style.css" rel="stylesheet" type="text/css" /> 
    7. 
	
  7. 
		<!-- www.divcss5.com --> 
    8. 
	
  8. 
		</head> 
    9. 
	
  9. 
		<body> 
    10. 
	
  10. 
		<div class="divbox">DIVCSS5实例内容</div> 
    11. 
	
  11. 
		 
    12. 
	
  12. 
		</body> 
    13. 
	
  13. 
		</html> 
    14. 




	3、案例CSS代码：




    
	
  1. 
		@charset "utf-8"; 
    2. 
	
  2. 
		/* DIVCSS5-CSS初始化模板-www.divcss5.com */ 
    3. 
	
  3. 
		body, div {margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} 
    4. 
	
  4. 
		/* \5B8B\4F53 代表 宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */ 
    5. 
	
  5. 
		ol, ul ,li{list-style:none} 
    6. 
	
  6. 
		body{color:#FFF;background:#E2E2E2 url(bg.gif) repeat-y center 0; text-align:center} 
    7. 
	
  7. 
		 
    8. 
	
  8. 
		.divbox{ margin:0 auto; width:274px; height:200px; background:#00F} 
    9. 




	4、实例截图



	对body设置纵向平铺背景图片显示截图 对body设置纵向平铺背景图片显示案例截图



	从以上图上看到对body设置背景图片从上到下纵向平铺时，无论内容是否占满1屏幕，其背景都会从上到下都会平铺满整个屏幕，此时就不那么好看了，接下来第二个案例在此基础上进行解决背景随内容占用多个显示多个平铺图片背景。



	5、在线演示：查看案例



	二、解决内容多高body设置背景图片平铺显示多高   -   TOP



	1、解决说明 我们只需要在CSS代码中对html加一个背景色即可，当然这个背景设置需要根据布局实际情况而设置，这里因为背景颜色为“#E2E2E2”，此时我们就只需要对html设置一个CSS背景色为“#E2E2E2”即可解决实现完美背景图片纵向从上到下平铺问题。



	2、CSS代码：




    
	
  1. 
		@charset "utf-8"; 
    2. 
	
  2. 
		/* DIVCSS5-CSS初始化模板-www.divcss5.com */ 
    3. 
	
  3. 
		body, div {margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} 
    4. 
	
  4. 
		/* \5B8B\4F53 代表 宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */ 
    5. 
	
  5. 
		ol, ul ,li{list-style:none} 
    6. 
	
  6. 
		html{background:#E2E2E2}/* CSS注释说明：对html设置背景颜色 */ 
    7. 
	
  7. 
		body{color:#FFF;background:#E2E2E2 url(bg.gif) repeat-y center 0; text-align:center} 
    8. 
	
  8. 
		 
    9. 
	
  9. 
		.divbox{ margin:0 auto; width:274px; height:200px; background:#00F} 
    10. 




	3、案例截图



	css解决body背景图片平铺过于显示 解决body背景图片纵向平铺内容占多高背景图片显示多高



	以上实现body设置从上到下平铺背景图片随html网页内容占多高显示多高紧贴内容方法，希望对大家有用。


                    
                    

                		
            

        
 
          
          
    
          
          
 

              
        


        

            

                
最新评论

                

                
    
                
    
                    加载更多~~
                
    
                
    
            
    
            
            
    
                
    添加评论
    
                
    
                    
    
                  
                        
                        
    
                        
    
                        
                    
                
    
                
    
                    
                
    
            
    
            

        
    

        
    
            
    更多文章推荐
    
            
        
    
                
        
    
    

    
    
      
    
    
    

    
    




    


    
    	
    
            
    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
    
            
    京ICP备14009008号-1@版权所有www.zixuephp.com
    
            
    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
    
        
    

    


    
    
    
    
        
    添加评论