时间戳

首页 > 解决方案 > 隐藏背景溢出

css - 隐藏背景溢出

问题描述

我试图得到这个： 在此处输入图像描述

是否可以仅使用 CSS 或 JavaScript 来实现？

进度条的宽度是动态计算的。

.average-rating * {
  box-sizing: border-box;
}
.average-rating {
  position: relative;
  width: 200px;
  height: 40px;
}
.average-rating .progress {
  position: absolute;
  height: 100%;
  background-color: #66ff66;
  z-index: -1;
}
.average-rating .balls {
  display: flex;
  width: 100%;
  height: 100%;
}
.average-rating .balls div {
  flex: 1;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #006600;
}
<div class="average-rating">
  <div class="progress" style="width: 50%;"></div>
  <div class="balls">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

这是我正在处理的代码的基础。我不知道 HTML 结构是否组织良好以实现这一点，也不知道是否有一种简单的方法可以在 CSS 或 JS 中实现这一点。

标签： css

解决方案

将 amask与重复一起使用radial-gradient：

.average-rating * {
  box-sizing: border-box;
}
.average-rating {
  position: relative;
  width: 200px;
  height: 40px;
  
  -webkit-mask: 0 0 / 40px 40px radial-gradient(circle, #f00 0 20px, #f000 21px) repeat-x;
  mask: 0 0 / 40px 40px radial-gradient(circle, #f00 0 20px, #f000 21px) repeat-x;
}
.average-rating .progress {
  position: absolute;
  height: 100%;
  background-color: #66ff66;
  z-index: -1;
}
.average-rating .balls {
  display: flex;
  width: 100%;
  height: 100%;
}
.average-rating .balls div {
  flex: 1;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #006600;
}
<div class="average-rating">
  <div class="progress" style="width: 50%;"></div>
  <div class="balls">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

推荐阅读