cssbackground属性简书 CSS background 属性

cssbackground属性简书

CSS background 属性是用来设置元素的背景，它可以用来设置背景颜色、图片、渐变、图案或者其他背景效果。它是一个复合属性，可以使用多个属性来定义不同的背景效果。

background-color 属性用于设置元素的背景颜色，它可以使用十六进制颜色值、RGB 颜色值或者预定义的颜色名称。例如：

background-color: #FF0000;  
background-color: rgb(255, 0, 0);  
background-color: red; 

background-image 属性用于在元素的背景中显示图片，它可以使用 URL 来引用图片文件。例如：

background-image: url(/images/bg.jpg);

background-repeat 属性用于决定背景图片是否重复显示，有三个取值 repeat、repeat-x 和 repeat-y。例如：

background-repeat: repeat;  
background-repeat: repeat-x;  
background-repeat: repeat-y; 

background-position 属性用于决定背景图片在元素中的位置，有两个取值 left top 或者 x y。例如：

background-position: left top;  
 background-position: 10px 20px;  

background-attachment 属性决定背景图片是否随浏览器内容的卷动而卷动。有两个取值 scroll 或 fixed。例如：

 background-attachment: scroll;   background-attachment: fixed; 
CSS background 属性
CSS background 属性




标签定义及使用说明

背景缩写属性可以在一个声明中设置所有的背景属性。
可以设置的属性分别是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image.
如果上述值缺少一个，这不要紧，例如background：＃FF0000 URL（smiley.gif）;是允许的。

    

        

            
默认值:
            
请参阅单独的属性
        
        

            
继承:
            
no
        
        

            
版本:
            
CSS1+ CSS3中的新的属性
        
        

            
JavaScript 语法:
            
 object	object.style.background="red url(smiley.gif) top left no-repeat"
        
    





语法


    

        
background:bg-color bg-image position/

            bg-size bg-repeat bg-origin bg-clip 

                bg-attachment initial|inherit;

        
    




    

        

            
值
            
说明
            
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
        
    




实例


    
实例

    
在一个div元素中设置多个背景图像（并指定他们的位置）：
    

        
body
{ 
    background: #00ff00 url("smiley

            .gif") no-repeat fixed center

                ; 
}

        
    
    





浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

    

        

            
属性
            

            

            

            

            

        
        

            
background
            
1.0
            
4.0
            
1.0
            
1.0
            
3.5
        
    

所有主要浏览器都支持background属性。
注意IE8和更早版本不支持一个元素多个背景图像。
注意 IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

相关文章

CSS 教程: CSS Background


CSS3 教程: CSS3 Backgrounds