CSS HTML实现背景图片的填充

原文地址: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
 
  1. >      
  2. <html>      
  3. <head>      
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      
  5. <title>hello worldtitle>      
  6.   
  7. <style type="text/css">  
  8. body {  
  9.     margin: 0;  
  10.     background-image: url('bg.jpg');    
  11.     background-repeat:no-repeat;  
  12.         background-position:0% 0%;  
  13.     background-size:cover;  
  14.     background-color: #22C3AA;  
  15. }  
  16. style>  
  17.   
  18. head>      
  19. <body>  
  20. body>      
  21. html> 

实现方式二:

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

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


 由于标签的图片不能够拉伸,

解决办法:

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


[html]  view plain  copy
 
  1. >      
  2. <html>      
  3. <head>      
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      
  5. <title>hello worldtitle>      
  6.   
  7. <style type="text/css">  
  8. body {  
  9.     margin: 0;    
  10.     background-color: #22C3AA;  
  11. }  
  12. style>  
  13.   
  14. head>      
  15. <body>  

你可能感兴趣的:(CSS/CSS3)