gpt4 book ai didi

html - Font Awesome 百分比宽度堆叠图标

转载 作者:技术小花猫 更新时间:2023-10-29 12:02:21 24 4
gpt4 key购买 nike

<分区>

我想用CSS实现如下效果:

enter image description here

这个星形图标是一种字体。我想用百分比定义橙色背景的宽度,所以 50% 应该是星星的完美一半。

现在,我做了以下事情:

<div class="container">
<span class="star star-under fa fa-star"></span>
<span class="star star-over fa fa-star"></span>
</div>

和:

.container
{
font-size: 200px;
height: 300px;
position: relative;
width: 100%;
}

.star
{
display: inline-block;
left: 0;
position: absolute;
top: 0;
}

.star-under
{
color: #ddd;
}

.star-over
{
color: #f80;
overflow: hidden;
width: 30%;
}

问题是我需要提供宽度和高度才能使用宽度的百分比。如果我跳过容器的宽度和高度,它不会显示任何内容,因为它包含绝对定位的子项。

这个 % 值是在服务器端计算的,所以我宁愿让它保持内联,如下所示:

<span class="star star-over fa fa-star" style="width: 62%;"></span>

最灵活的方法是什么?我所说的最灵活是指不需要提供任何宽度或高度的那种。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com