CSS3-背景

    背景

        1 背景颜色

        2 背景图片

        3 背景平铺

        4 背景位置

        5 背景相关属性连写

        6（拓展）img标签和背景图片的区别

            1 背景颜色

            属性名：background-color

            取值；关键字、rgb表示法、rgba表示法、十六进制

            注意：

                1 背景颜色默认值是透明：rbga(0,0,0,0)、transparent

                2 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色 

            2 背景图片

                属性名：background-image

                取值：url("图片路径")

                注意：

                    1 背景图片中url中可以省略引号

                    2 背景图片默认是在水平和垂直方向平铺的

                    3 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

            

            3 背景平铺

                属性名：background-repeat

                取值：

                    1 repeat     水平和垂直方向都平铺(默认)

                    2 no-repeat  不平铺

                    3 repeat-x   水平平铺 

                    4 repeat-y   垂直平铺 

            

            4 背景位置

                属性名：background-position

                取值：background-position:水平方向 垂直方向；

                    1 方位名词(两两组合可以表示9个位置)

                        水平方向 左(left) 中(center) 右(right)

                        垂直方向 上(top) 中(center) 下(bottom)

                    2 数组+px(坐标表示)

                        原点(0,0) 盒子的左上角  x轴  y轴

                        注意：数值为正 正方向移动，数值为负 反方向移动

                注意：无论是背景图片还是背景颜色都只在盒子里显示

                

            5 背景相关属性连写

                属性名：background

                连写：background：color image repeat position

                注意：

                    1 单个属性值的合写，取值之间以空格隔开

                    2 书写顺序不分先后，但推荐上述写法

                    3 取值个数可以按照需求省略

                    4 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()

            6（拓展）img标签和背景图片的区别

                需求：需要在网页中展示一张图片的效果？

                    方法一：直接写上img标签即可

                        img标签是一个标签，不设置宽高默认会以原尺寸显示

                    方法二：div标签 + 背景图片

                        需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

                使用：

                    不经常更换的用背景图

                    经常更换的用img图片

代码：

    
    
    
    
    



    

        背景Demo
    

效果图：