评价，星星

最新推荐文章于 2024-05-06 04:13:35 发布

mrhaoxiaojun

最新推荐文章于 2024-05-06 04:13:35 发布

阅读量260

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/mrhaoxiaojun/article/details/52668143

版权

html/css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>评价</title>
    <style>
    .score-public {
        width: 210px;
        position: relative;
        height: 30px;
        display: inline-block;
        vertical-align: middle;
    }
    
    .star,
    .star-gray {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: block;
         background: url(./star-all-gray.png) no-repeat;
    }
    
    .star {
        z-index: 2;
        background: url(./star-all.png) no-repeat;
        background-size: auto 100%;
    }
    
    .star-gray {
        background-size: auto 100%;
    }
    </style>
</head>

<body>
    <span class="score-public score ">
                <span class="star" style="width:50%"></span>
                <span class="star-gray"></span>
    </span>
</body>

</html>

mrhaoxiaojun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
评价，星星

评价 .score-public { width: 210px; position: relative; height: 30px; display: inline-block; vertical-align: middle; } .star, .star-gray
复制链接

扫一扫

专栏目录