为什么我的CSS星状图层无法正确对齐？

Question

我希望黄色星星完全遮盖蓝色星星

有人可以帮助完成此操作吗？或至少指向正确的方向？

这是我的代码：

.star-ratings-css {

  width: 100px;
}
.star-ratings-css-top {
      display: block;
     height: 22px;
    position: relative;
    overflow: hidden;
}
.star-ratings-css-bottom::before  {
color: #167ac6;
    content: "★★★★★";
    font-size: 22px;
    position: absolute;
}
.star-ratings-css-top::before  {
    color: #f4b414;
    content: "★★★★★";
    font-size: 22px;
    position: relative;
}

<div class="star-ratings-css">
  <div class="star-ratings-css-bottom"></div>
  <div class="star-ratings-css-top" style="width: 31%"></div>

</div>

它没有我想要的。我在做什么错了？

黄色星星不能完全覆盖蓝色星星。

Answer 1

只需删除scrapy-splash，它将像超级按钮一样工作。以下是4/5的示例。

api/network call

overflow: hidden;

Answer 2

您可以为:before和:after选择器使用绝对位置。

.star-ratings-css {
  width: 100px;
}
.star-ratings-css-top {
      display: block;
     height: 22px;
    position: relative;
    overflow: hidden;
}
.star-ratings-css-bottom::before  {
color: #167ac6;
    content: "★★★★★";
    font-size: 22px;
    position:absolute;top:0;left:8px
}
.star-ratings-css-top::before  {
    color: #f4b414;
    content: "★★★★★";
    font-size: 22px;
    position:absolute;top:-8px;left:0
}

<div class="star-ratings-css">
  <div class="star-ratings-css-bottom"></div>
  <div class="star-ratings-css-top" style="width: 31%"></div>

</div>

Answer 3

尝试使用Chrome浏览器的“检查”功能，将CSS设置调整为您要显示的内容。

前两颗星都变了黄色，变成了黄色。

• 删除：“高度：22像素；”来自.start-ratings-css-top :: before
• 将style =“ width：31％”更改为style =“ width：35％”

另一种只获得两（2）个黄色星星的方法是...

• 删除：“高度：22像素；”来自.start-reatings-css-top
• 删除：style =“ width：31％”
• 更改：内容：“★★”；对于.start-ratings-css-top :: before

Answer 4

您可以使用一个元素简化代码

.star-ratings-css {
  display: inline-block;
  position: relative;
  font-size: 22px;
}

.star-ratings-css::before {
  color: #167ac6;
  content: "★★★★★";
}

.star-ratings-css::after {
  color: #f4b414;
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--p, 100%);
  overflow: hidden;
  white-space:nowrap;
}

<div class="star-ratings-css" style="--p:20%;"></div>
<br>
<div class="star-ratings-css" style="--p:50%;"></div>
<br>
<div class="star-ratings-css"></div>

Answer 5

您的示例有几处错误：

• 顶部元素是100像素的31％，但星星的宽度不同。如果将宽度设置为50％，则不会显示2½星！

• 您要在顶部元素上设置22px的高度，该高度比底部元素的实际高度（22px *线高=〜30px）要短。

您可以使用display: inline-block使容器延伸到内容，即实际五颗星的宽度。这将使百分比宽度与正确的星数（或分数）匹配。并删除height: 22px。简化的代码如下所示：

.star-ratings-css {
  display: inline-block;
  position: relative;
  font-size: 22px;
}

.star-ratings-inner {
  position: absolute;
  overflow: hidden;
}

.star-ratings-inner::after {
  color: #f4b414;
  content: "★★★★★";
}

.star-ratings-css::after {
  color: #167ac6;
  content: "★★★★★";
}

<div class="star-ratings-css">
  <div class="star-ratings-inner" style="width: 31%"></div>
</div>

Answer 6

星级图标

其中的代码过于复杂，可以使用比<div>更好的标签来轻松完成，并且可以交互。

HTML

以下演示中使用的两种类型的标签是：

<input id='ID' name='rad' type='radio'>

和

<label for='ID' class='star'>★</label>

每个星形图标都有一个input和label，输入的ID与label [for]属性匹配。以这种方式设置input/label对时，它们将相关联，以便在单击一个时也单击另一个。所有inputs都将被隐藏，所有labels都将被设置样式。

---

CSS

每个input之后是下一个label：

<label for='ID3' class='star'>★</label> // 1. User clicks

<input id='ID3' name='rad' type='radio'> // 2. Which puts this as: [name='rad']:checked

<label for='ID4' class='star'>★</label> /* 3. Any labels that occur from this point on
will be styled: ~ .star {color:navy}*/

<input id='ID4' name='rad' type='radio'>

<label for='ID5' class='star'>★</label>

因此，当此规则集位于CSS中时：

 [name='rad']:checked ~ .star { `color: navy` }

它将以两种状态设置星星的样式：默认color: gold（打开）或color: navy（关闭）。

---

演示

单击一个星星，它右边的所有星星都会关闭。点击没有星标的左端或右端，所有星标都将关闭。

[name=rad] {
  display: none
}

label {
  display: inline-block;
  outline: 0;
  font-size: 10vh;
  line-height: 1;
  color: gold;
  background: none;
  transition: 0.6s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

[name=rad]:checked~.star {
  color: navy;
  transition: 0.6s;
}

#s0:checked~.star {
  color: navy;
  transition: 0.6s;
}

[name=rad]+label.star:hover {
  color: cyan;
  transition: 0.4s;
}

[name=rad]+label.star:active {
  color: tomato;
  transition: 0.4s;
}

<label for='s0' class='void'>&nbsp;&nbsp;&nbsp;</label>
<input id='s0' name='rad' type='radio' value='0'>
<label for='s1' class='star'>&#9733;</label>
<input id='s1' name='rad' type='radio' value='1'>
<label for='s2' class='star'>&#9733;</label>
<input id='s2' name='rad' type='radio' value='2'>
<label for='s3' class='star'>&#9733;</label>
<input id='s3' name='rad' type='radio' value='3'>
<label for='s4' class='star'>&#9733;</label>
<input id='s4' name='rad' type='radio' value='4'>
<label for='s5' class='star'>&#9733;</label>
<input id='s5' name='rad' type='radio' value='5' checked>
<label for='s0' class='void'>&nbsp;&nbsp;&nbsp;</label>