CSS HTML实现背景图片的填充

最新推荐文章于 2024-07-24 09:41:52 发布

坦GA

最新推荐文章于 2024-07-24 09:41:52 发布

阅读量1.1w

点赞数 7

分类专栏： CSS/CSS3 JSP/FreeMarker/Velocity/html 文章标签： CSS HTML 背景图片

CSS/CSS3 同时被 2 个专栏收录

48 篇文章 3 订阅

订阅专栏

JSP/FreeMarker/Velocity/html

48 篇文章 1 订阅

订阅专栏

原文地址：http://blog.csdn.net/nickwong_/article/details/50806884

CSS实现单张背景图片的填充

实现方式一：

直接使用body元素的background-image属性，多个浏览器兼容，基本满足要求

添加background-color: #22C3AA;在加载图片前显示颜色

BUG：页面太小时下方会留有空隙

所有浏览器都支持 background 属性。

注释：IE8 以及更早的浏览器不支持一个元素多个背景图像。

注释：IE7 以及更早的浏览器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。

定义和用法

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

默认值：	not specified
继承性：	no
版本：	CSS1 + CSS3
JavaScript 语法：	object.style.background="white url(paper.gif) repeat-y"

可能的值

值	描述	CSS
background-color	规定要使用的背景颜色。	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1
inherit	规定应该从父元素继承 background 属性的设置。	1

[html]view plain copy 
   
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">      
 <html>      
 <head>      
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      
 <title>hello world</title>      
   
 <style type="text/css">  
 body {  
     margin: 0;  
     background-image: url('bg.jpg');    
     background-repeat:no-repeat;  
         background-position:0% 0%;  
     background-size:cover;  
     background-color: #22C3AA;  
 }  
 </style>  
   
 </head>      
 <body>  
 </body>      
 </html> 

实现方式二：

使用DIV，图片能自适应浏览器的大小，不会出现body的bug

BUG：IE11不兼容，下方会有一个绿线(body背景颜色)，十分不美观

由于<body>标签的图片不能够拉伸，

解决办法：

1、图片不够大，又background属性不能拉伸图片； 2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img> 3、body的background属性去掉，要不然会被遮住

[html]view plain copy 
   
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">      
 <html>      
 <head>      
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      
 <title>hello world</title>      
   
 <style type="text/css">  
 body {  
     margin: 0;    
     background-color: #22C3AA;  
 }  
 </style>  
   
 </head>      
 <body>  
 <!--  
 <div id="Layer1" style="position:absolute; width:100%; height:100%; background-color: #22C3AA; z-index:-1" >      
 <img src="3-bg.jpg" height="100%" width="100%"/>      
 </div>  
 -->  
 </body>      
 </html> 