<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 精灵图:为了降低与服务器交互次数,只请求一次即可获取11种图形 -->
<style>
.star {
display: inline-block;
width: 55px;
height: 11px;
background-color: aqua;
background-image: url(./img/ic_rating_s.png);
}
.star4 {
background-position: 0 -22px;
}
.star2 {
background-position: 0 -66px;
}
.star0_5 {
background-position: 0 -99px;
}
.role {
width: 50px;
height: 90px;
background-image: url(./img/7f55485040da4b5aa43aca3ce05f2ddb.jpg);
background-position: -85px 0px;
}
</style>
</head>
<body>
<span class="star star4"></span>
<span class="star star2"></span>
<span class="star star0_5"></span>
<hr />
<div class="role"></div>
</body>
</html>
css精灵图
最新推荐文章于 2024-10-04 13:52:58 发布