position

最新推荐文章于 2024-03-19 19:51:29 发布

weixin_30699955

最新推荐文章于 2024-03-19 19:51:29 发布

阅读量44

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yokoboy/archive/2013/01/27/2878954.html

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;">

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