背景图片的位置
程序员文章站
2024-03-19 09:00:10
...
背景图片的位置
参数是方位名词
1.如果指定的两个值都是方位名词,则两个值前后顺序无关. 方位名词有：top，center，bottom，left，center，right。
2.如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐.。
<div></div>
div {
width: 1300px;
height: 1300px;
background-image: url(images/01.jpg);
background-color: pink;
background-repeat: no-repeat;
/* background-position: center top; */
/* 水平靠上对齐 */
/* background-position: center right; */
/* 水平靠右对齐 */
background-position: top;
/* 水平靠上,另一个值省略,即默认居中对齐 center */
}
效果：
参数是精确单位
如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标。
<body>
<div></div>
</body>
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: 20px 50px;
}
效果：
x轴上20px，y轴上50px。
如果只指定一个值,那么该数值一定是x轴坐标,另一个默认垂直居中。
background-position: 20px;
效果;
参数是混合单位
如果指定的两个值是精确单位和方位名词的混用,则第一个值是x坐标,第二个值是y坐标。
background-position: 20px center;
效果：
或
background-position: center 20px;
效果：
学完后，回顾之前的那个王者的超大背景图片，观察官网，其实应该距离顶部有一定的距离。可以写成：
<body>
</body>
body {
background-image: url(images/03.jpg);
background-repeat: no-repeat;
background-position: center 40px;
/* x轴水平对齐,y轴距上方40px */
background-color: pink;
/* 为了方便观察40px */
}
效果;
上一篇： 情人节来了，快来给最喜欢的人打上最浪漫的马赛克吧~
下一篇： C# 基础之装拆箱 IL 层