CSS 部分填充星和间距

Question

我正在使用 HTML 和 CSS 来显示基于百分比的星级。我正在尝试使该百分比与填充的星星百分比相匹配。

我已经关闭了，但是当我添加 'letter-spacing' 和 'padding-left' CSS 以使其在我的网页上看起来更好时，填充区域的百分比会发生变化。

这是我的 HTML 和 CSS：

.score {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
}

.score::before,
.score span::before {
  content: "✰✰✰✰✰";
  display: block;
}

.score span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.scorePadded {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
  letter-spacing: 20px;
  padding-left: 5px;
}

.scorePadded::before,
.scorePadded span::before {
  content: "✰✰✰✰✰";
  display: block;
}

.scorePadded span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  padding-left: 5px;
}

body {
  background: black;
}

<div>
  <span class="score"><span style="width: 68.0%"></span></span>
</div>
<div>
  <span class="scorePadded"><span style="width: 68.0%"></span></span>
</div>

我想让底部星星（有间距）填充到与顶部星星相同的百分比（我认为正确显示 68% 填充），但间距不允许这样做。

Answer 1

这些差距使这比简单的百分比要复杂一些。我不相信有一个 CSS 解决方案可以解决这些差距，以便将填充明确应用于星星本身。

也就是说，通过一些数学运算，您可以使用公式应用正确的宽度。

在我看来，您需要将评分乘以星宽。这告诉我们要填充多少，以像素为单位。例如，rating * starWidth，其中评分超出了5。

然后您需要为每个间隙添加。分数跨越的空白量可以表示为Math.floor(rating)。要获得以像素为单位的宽度，它是Math.floor(rating) * gapSize。这是我们必须添加多少像素来解决大间隙，确保当我们达到一个时，我们开始填充下一颗星而不是它们之间的间隙。

通过添加填充宽度和间隙宽度，您可以得到：

totalWidthInPixels = (rating * starWidth) + (gaps * gapSize);

看到你提到你正在使用 Jekyll 计算这个百分比，而我对 Jekyll 一无所知，我会让你填写那部分。

公式的演示如下所示。

const span1 = document.getElementById("score");
const span2 = document.getElementById("scorePadded");

const rating = parseFloat(prompt("Enter rating between 0-5"));
const starWidth = span1.offsetWidth / 5.0;
const gapSize = (span2.offsetWidth - span1.offsetWidth - 5) / 5.0;
const gaps = Math.floor(rating);

const width = (rating * starWidth) + (gaps * gapSize);

span1.style.width = `${(rating/5) * 100}%`;
span2.style.width = `${width}px`;

console.log("star width: ", starWidth);
console.log("gap size: ", gapSize);
console.log("fill width: ", width);

.score {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
}

.score::before,
.score span::before {
  content: "✰✰✰✰✰";
  display: block;
}

.score span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.scorePadded {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
  letter-spacing: 20px;
  padding-left: 5px;
}

.scorePadded::before,
.scorePadded span::before {
  content: "✰✰✰✰✰";
  display: block;
}

.scorePadded span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  padding-left: 5px;
}

body {
  background: black;
}

<div>
  <span class="score"><span id="score"></span></span>
</div>
<div>
  <span class="scorePadded"><span id="scorePadded"></span></span>
</div>