CSS背景属性

背景属性

背景图片位置

1. 参数是方位名词,

 /* 如果是方位名词 right center和center right 效果是等价的 跟顺序没有关系  如果第二个参数省略 默   认垂直居中显示*/
  background-position: center right;

• 如果指定的两个值都是方位名词,则两个值前后顺序无关
• 如果只指定了一个方位名词,另一个值省略,则第二个值默认默认居中对齐

   background-position:center;

2. 参数是精确单位

• 如果参数是精确坐标,那么第一个肯定是X坐标,第二个一定是y坐标

    background-position:20px 30px;

• 如果只指定一个值,则该数值一定是X坐标,Y轴默认为center

   background-position:20px;

背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment: scroll | fixed;

背景符合写法

习惯性写法:背景颜色 背景图片 背景平铺 背景图片滚动 背景图片位置

背景颜色半透明

background:rgba(0,0,0,0.3)
 /* 最后一个参数是alpha透明度,取值范围在0~1之间 */

背景缩放background-size

background-size:图片的宽度 图片的高度;
如果只写一个参数,肯定是宽度 高度省略了,则会等比例缩放

• cover把背景图图像扩展至足够大,以使背景图像完全覆盖背景区域

   div{
            width: 500px;
            height: 600px;
            border: 1px solid;
            background:url(./image/pig.jpg) no-repeat;
            /* cover要完全覆盖div盒子 可能有部分背景图片显示不全 */
            background-size:cover;
        }

效果:

• contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容

    div{
            width: 500px;
            height: 600px;
            border: 1px solid;
            background:url(./image/pig.jpg) no-repeat;
            /* contain高度和宽度等比例 当宽度或者高度铺满div盒子就不在拉伸 可能有部分空白区域*/
            background-size:contain
        }

效果: