CSS核心（十六）背景定位的三种方式 backgkround-position 属性讲解

人亦已歌 · 发表于 2023-1-31 21:25:14

一、使用像素单位定位背景

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景定位的三种方式 backgkround-position 属性讲解</title>
</head>

<body>
<style>
        div{
                width:500px;
                height:500px;
                /* 背景定位的三种方式 像素、关键字、百分比
                调整背景图的位置：backgkround-position
                第一个值代表水平距离，即举例盒子左边的尺寸，第二个代表垂直距离，即举例盒子顶边的尺寸*/ 
                background-position:20px 4px;
                background-image:url(./img/5.jpg);
                background-repeat:no-repeat;
                background-color:#abcdef;
        }
</style>
<div>
        背景background相关属性
</div>
</body>
</html>

显示结果如下：

CSS核心（十六）背景定位的三种方式 backgkround-position 属性讲解

二、使用关键字定位背景

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景定位的三种方式 backgkround-position 属性讲解</title>
</head>

<body>
<style>
        div{
                width:500px;
                height:500px;
                /* 背景定位使用关键字：
                top/bottom/left/right/center */
                background-repeat:no-repeat;
                background-color:#abcdef;
                background-image:url(./img/5.jpg);
                /* 意思是:图片纵向居下对齐，横向居中对齐，如果平铺，则由下向上填充，两边空白自然填充 */
                background-position:bottom center;
        }
</style>
<div>
        背景background相关属性
</div>
</body>
</html>

显示结果如下：

三、使用百分比定位背景

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景定位的三种方式 backgkround-position 属性讲解</title>
</head>

<body>
<style>
        div{
                width:500px;
                height:500px;
                /* 背景定位使用百分比 */
                background-color:#abcdef;
                background-repeat:no-repeat;
                background-image:url(./img/5.jpg);
                /* 50% 50%表示横向居中，纵向居中，60% 50%表示横向向右移动10% */
                background-position:60% 50%;
        }
</style>
<div>
        背景background相关属性
</div>
</body>
</html>

显示结果如下：