Css Blazor问题，关于基于属性的宽度百分比

我有一个关于我在Blazor网站上的评级系统宽度的问题。我希望明星们是基于我的电影的评级。像这样：

现在我不知道如何使用我的movie.Rating属性设置星星的宽度。我也想让它看起来像这样，但要知道它不是那样工作的

div class=“rating upper”style=“width:@movie.rating”%>

我的代码看起来是这样的（我现在已经投了90%，但显然希望我的评级在那里）：

---

感谢所有的帮助和第一次发布在这里，因为我找不到任何关于这个的信息。Blazor和编程都是新手。

我个人会使用CSS剪辑路径来实现这一点，并且结构与您当前的略有不同

首先是我的CSS

.rating{
--评分：0分；
--百分比：计算（var（--评级）*20%）；
位置：相对位置；
显示：内联；
}
.rating：：在{
位置：绝对位置；
内容：“⭐⭐⭐⭐⭐";
剪辑路径：多边形（0，var（--percent）0，var（--percent）100%，0 100%）；
背景色：透明；
/*纯粹是为了让这些星星垂直排列*/
顶部：-0.2rem；
}
.评级：：之前{
位置：绝对位置；
左：钙（100%）；
内容：“⭐⭐⭐⭐⭐";
不透明度：0.2；
/*纯粹是为了让这些星星垂直排列*/
顶部：-0.2rem；
}

还有一些样品剃须刀

评级：

解释 “rating”类有一个“before”和“after”，这两个类都向内容添加了一组星星，它们被定位为重叠，背景设置为低不透明度，前景使用剪辑路径将星星“遮罩”到所需的宽度

百分比宽度通过CSS变量

--rating

计算得出，该变量使用Razor语法应用于

标签

---

您可以在这里查看演示：

我个人会使用CSS剪辑路径来实现这一点，并且结构与您当前的略有不同

首先是我的CSS

.rating{
--评分：0分；
--百分比：计算（var（--评级）*20%）；
位置：相对位置；
显示：内联；
}
.rating：：在{
位置：绝对位置；
内容：“⭐⭐⭐⭐⭐";
剪辑路径：多边形（0，var（--percent）0，var（--percent）100%，0 100%）；
背景色：透明；
/*纯粹是为了让这些星星垂直排列*/
顶部：-0.2rem；
}
.评级：：之前{
位置：绝对位置；
左：钙（100%）；
内容：“⭐⭐⭐⭐⭐";
不透明度：0.2；
/*纯粹是为了让这些星星垂直排列*/
顶部：-0.2rem；
}

还有一些样品剃须刀

评级：

解释 “rating”类有一个“before”和“after”，这两个类都向内容添加了一组星星，它们被定位为重叠，背景设置为低不透明度，前景使用剪辑路径将星星“遮罩”到所需的宽度

百分比宽度通过CSS变量

--rating

计算得出，该变量使用Razor语法应用于

标签

---

您可以在此处查看演示：

欢迎使用Stack Overflow！请直接复制粘贴问题中的代码，而不是您代码的图片。欢迎使用Stack Overflow！请直接复制粘贴问题中的代码，而不是您代码的图片。谢谢您的帮助。我已经尝试过像您那样执行此操作，但似乎无法将其发送到w工作。我应该在我的案例中使用这一行代码吗？评级：当我像你在上面做的那样做时，我总是得到五颗星。顺便说一下，我的电影。评级是双倍的，评级范围是0-5，所以我只想将我的评级乘以20，从0-100中得到一个百分比（我想这就是你在上面的代码中所做的）。你可能会用类似的东西来代替你的div，或者只是稍微调整一下你的div。对不起，我以前在手机上-使用div时要注意的是，默认情况下，它将是100%宽度，这就是为什么我的CSS中有

display:inline

。因此，你可能会计算一个百分比，但这将默认为一个百分比a整个div的ge，默认为页宽…谢谢你的帮助。我试着像你那样做，但似乎无法让它工作。我应该在我的情况下使用这行代码吗？评级：当我像你做的那样做时，我总是得到五颗星。顺便说一句，我的电影。评级是双倍的，评级范围从0到5，所以我只想t将我的评分乘以20，得到0-100的百分比（我想这就是你在上面代码中所做的）。你可能会用类似的东西来代替你的div，或者只是稍微调整一下你的div。对不起，我以前在手机上-使用div时要注意的是，默认情况下，它将是100%宽度，这就是为什么我的CSS中有

display:inline

。因此，你可能会计算一个百分比，但这将默认为一个百分比a整个div的ge，默认为页面宽度。。。