1、实现案例:小图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例</title>
<style>
a {
display: block;
/* background-color: pink; */
width: 145px;
height: 50px;
text-decoration: none;
color: rgb(145, 145, 145);
/* 文字水平居中 */
line-height: 50px;
text-indent: 1.5em;
/* 使用背景来加入图片,并利用定位属性调整位置 */
background-image: url(./title_sprite.png);
background-repeat: no-repeat;
background-position: left center;
}
a:hover {
color: crimson;
}
</style>
</head>
<body>
<a href="#">成长守护平台</a>
</body>
</html>
2、实现案例:大图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>exercise</title>
<style>
body {
background-image: url(./images/big_image.jpg);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
</body>
</html>
无论浏览器body大小,背景图像会始终保持居中: