CSS background-position 属性

最新推荐文章于 2024-04-07 10:00:15 发布

a70104

最新推荐文章于 2024-04-07 10:00:15 发布

阅读量185

点赞数

原文链接：http://www.cnblogs.com/yttbbd/p/4842939.html

版权

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

语法：

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

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%;
        }

如图:　　

转载于:https://www.cnblogs.com/yttbbd/p/4842939.html

a70104

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS background-position 属性

background-position 属性设置背景图像的起始位置。语法：background-position : length || lengthbackground-position : position || position取值：length :百分数 | 由浮点数字和单位标识符组成的长度值position : top | center | bottom ...
复制链接

扫一扫