position

 

1. 背景图片的position

 background-position: 水平位置 垂直位置;

图片的中心点在 div 的中心点上

        <div style="width: 800px;
                    height:500px;
                    background-image: url('img/bg1.jpg');
                    background-repeat: no-repeat;
                    background-position: 50% 50%;
　　　　　　　　　　　(background-position: center center;) 效果一样
　　　　　　　　　　">
        </div>

<!-- 置顶居中 -->
background-position: 50% 0%;

<!-- 置底居中 -->
background-position: 50% 100%;

 

    <div style="width: 800px;
                height:500px;
                background-image: url('img/bg2.jpg');
                background-repeat: no-repeat;
                background-position: 300px 100px;">

利用背景定位加上鼠标事件，一张图片 就可以做到几张图片的效果， 貌似是叫图片精灵好像！

 

 

background : background-color || background-image || background-repeat || background-attachment || background-position