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

Question

我对我在 Blazor 网站上的评分系统的宽度有疑问。我希望星星是基于我的电影的评分。像这样：

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

div class="rating-upper" style="width:" @movie.Rating"%">

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

感谢您的帮助和第一次在这里发帖，因为我找不到任何关于此的信息。也是 Blazor 新手和一般编程。

Answer 1

我个人会为此使用 CSS 剪辑路径，并在结构上与您目前的有所不同。

首先是我的 CSS

    .rating {        
        --rating: 0;
        --percent: calc(var(--rating) * 20%);
        position: relative;
        display: inline;
    }
    .rating::after {        
        position: absolute;
        content:"⭐⭐⭐⭐⭐";
        clip-path: polygon(0 0, var(--percent) 0, var(--percent) 100%, 0 100%);
        background-color: transparent;
        /* Purely cosmetic to align these stars vertically */
        top: -0.2rem; 
    }
    .rating::before {
        position: absolute;
        left: calc(100%);
        content:"⭐⭐⭐⭐⭐";
        opacity: 0.2;
        /* Purely cosmetic to align these stars vertically */
        top: -0.2rem;
    }

还有一些 Razor 示例

<label class="rating" style=@($"--rating: {Rating}")>Rating : </label>

说明

“评级”类有一个前后都向内容添加一组星，它们被定位为重叠，背景设置为低不透明度，前景使用剪辑路径“屏蔽”星星到所需的宽度。

百分比宽度由 CSS 变量 --rating 计算得出，该变量使用 Razor 语法应用于 label。

您可以在此处查看演示：https://blazorfiddle.com/s/b6jpqbhe