码迷,mamicode.com
首页 > Web开发 > 详细

CSS background-position 属性

时间:2015-09-28 00:12:50      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:

background-position 属性设置背景图像的起始位置。

语法:

background-position : length || length 
background-position : position || position 

取值: 
length  :百分数 | 由浮点数字和单位标识符组成的长度值
position  : top | center | bottom | left | center | right 

1、background-position没有设置时,默认是background-position:0 0:

该效果background-position:left top;和background-position:0% 0%;是一致的

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:400px;
            height:300px;
            background:transparent url(images/img5.jpg) no-repeat;
            border:5px solid green;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

  图片如下:

技术分享

2、background-position设置具体值,第一个值表示x轴移动量,第二个值表示y轴移动量:

div{
            width:400px;
            height:300px;
            background:transparent url(images/img5.jpg) no-repeat;
            border:5px solid green;
            background-position:70px 40px;//图片向右移动70px,向下移动了40px,如果图片要向左或者向上,可以设负值background-position:-70px -40px 
}

  如图:

技术分享

3.background-position:center center或者background-position:50% 50%;设置背景居中

div{
            width:400px;
            height:300px;
            background:transparent url(images/img5.jpg) no-repeat;
            border:5px solid green;
            /*background-position:center center;*/
            background-position:50% 50%;
        }

如图:  

技术分享

 

CSS background-position 属性

标签:

原文地址:http://www.cnblogs.com/yttbbd/p/4842939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!