css3中background

background-image 添加背影图片
            如果图片大于容器,那么默认就从容器左上角开始放置
            如果图片小于容器,那么图片默认会平铺*/
            /*background-image: url("../images/bg-img.jpg");*/
 
background-repeat 设置背景平铺
            round:会将图片进行缩放之后再平铺
            space:图片不会缩放平铺,只是会在图片之间产生相同的间距值*/
            /*background-repeat: space;*/
 
background-position 设置位置
    background-position: center;
 
background-attachment 设置在滚动容器的背景的行为:跟随滚动/固定
            fixed:背景图片的位置固定不变
            scroll:当滚动容器的时候,背景图片也会跟随滚动*/

            /*local和scroll的区别:前提是滚动当前容器的内容
            local:背景图片会跟随内容一起滚动
            scroll:背景图片不会跟随内容一起滚动*/
            background-attachment: scroll;
 
background-size 设置背景图片的大小
建议:在使用这个属性之前衔确定宽高比与容器的宽高比是否一致,否则会造成图片失真变形*/
            /*background-size: 300px 500px;*/
            /*background-size: 300px;*/
            /*设置百分比,是参照父容器可放置内容区域的百分比*/
            /*background-size: 50% 50%;*/
            /*设置contain:按比例调整图片大小,使用图片宽高自适应整个元素的背景区域,使图片全部包含在容器内
            1.图片大于容器:有可能造成容器的空白区域,将图片缩小
            2.图片小于容器:有可能造成容器的空白区域,将图片放大*/
            /*background-size: contain;*/

            /*cover:与contain刚好相反,背景图片会按比例缩放自 适应整个背景区域,如果背景区域不足以包含所有背景图片,图片内容会溢出
            1.图片大于容器:等比例缩小,会填满整个背景区域,有可能造成图片的某些区域不可见
            2.图片小于容器:等比例放大,填满整个背景区域,图片有可能造成某个方向上内容的溢出*/
  

猜你喜欢

转载自www.cnblogs.com/ll15888/p/12317835.html