<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>背景位置-方位名词</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url('https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a55a011001e6b8ea0cce3');
background-repeat: no-repeat;
/* background-position: 方位名词; */
/* background-position: center top; */
/* background-position: right center; */
/* 如果是方位名词 right center 和 center right 效果是等价的 跟顺序没有关系 */
/* background-position: center right; */
/* 此时 水平一定是靠右侧对齐 第二个参数省略 y 轴是 垂直居中显示的 */
/* background-position: right; */
/* 此时 第一个参数一定是 top y轴 顶部对齐 第二个参数省略x 轴是 水平居中显示的 */
background-position: top;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS-40:背景位置-方位名词
最新推荐文章于 2024-04-19 09:39:59 发布