Question

我对网站上的图像处理有一个小问题。

我有问题要实施某种形式的评级系统，用户可以为1-2或3星评分。每个项目只显示一颗星。请求是明星更新如下星：

= 100％

= 70％

现在出现了一个问题：是否存在某种形式的css或javascript魔法，它允许我在不使用多个图像的情况下执行此操作。

提前谢谢

Answer 1

有一种方法可以做到这一点。

首先，需要显示星形图像。
然后在该星上，将显示一个径向进度条，并显示反向进度。它的一面颜色为白色，另一面颜色透明。

访问https://codepen.io/jo-asakura/pen/stFHi，了解如何执行径向进度条。

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:700);

.size(@w, @h) {
  height: @h;
  width: @w;
}

// --
*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  background: #ecf0f1;
  color: #444;
  font-family: 'Lato', Tahoma, Geneva, sans-serif;
  font-size: 16px;
  padding: 10px;
}

.set-size {
  font-size: 10em;
}

.charts-container:after {
  clear: both;
  content: "";
  display: table;
}

@bg: #34495e;
@size: 1em;

.pie-wrapper {
  .size(@size, @size);
  float: left;
  margin: 15px;
  position: relative;

  &:nth-child(3n+1) {
    clear: both;
  }

  .pie {
    .size(100%, 100%);
    clip: rect(0, @size, @size, @size / 2);
    left: 0;
    position: absolute;
    top: 0;

    .half-circle {
      .size(100%, 100%);
      border: @size / 10 solid #3498db;
      border-radius: 50%;
      clip: rect(0, @size / 2, @size, 0);
      left: 0;
      position: absolute;
      top: 0;
    }
  }

  .label {
    @font-size: @size / 4;
    @font-size-redo: @size * 4;

    background: @bg;
    border-radius: 50%;
    bottom: @font-size-redo / 10;
    color: #ecf0f1;
    cursor: default;
    display: block;
    font-size: @font-size;
    left: @font-size-redo / 10;
    line-height: @font-size-redo * .65;
    position: absolute;
    right: @font-size-redo / 10;
    text-align: center;
    top: @font-size-redo / 10;

    .smaller {
      color: #bdc3c7;
      font-size: .45em;
      padding-bottom: 20px;
      vertical-align: super;
    }
  }

  .shadow {
    .size(100%, 100%);
    border: @size / 10 solid #bdc3c7;
    border-radius: 50%;
  }

  &.style-2 {
    .label {
      background: none;
      color: #7f8c8d;

      .smaller {
        color: #bdc3c7;
      }
    }
  }

  &.progress-30 {
    .draw-progress(30, #3498db);
  }

  &.progress-60 {
    .draw-progress(60, #9b59b6);
  }

  &.progress-90 {
    .draw-progress(90, #e67e22);
  }

  &.progress-45 {
    .draw-progress(45, #1abc9c);
  }

  &.progress-75 {
    .draw-progress(75, #8e44ad);
  }

  &.progress-95 {
    .draw-progress(95, #e74c3c);
  }
}

.pie-wrapper--solid {
  border-radius: 50%;
  overflow: hidden;

  &:before {
    border-radius: 0 100% 100% 0 / 50%;
    content: '';
    display: block;
    height: 100%;
    margin-left: 50%;
    transform-origin: left;
  }

  .label {
    background: transparent;
  }

  &.progress-65 {
    .draw-progress--solid(65, #e67e22, @bg);
  }

  &.progress-25 {
    .draw-progress--solid(25, #9b59b6, @bg);
  }

  &.progress-88 {
    .draw-progress--solid(88, #3498db, @bg);
  }
}

// --
.draw-progress(@progress, @color) when (@progress <= 50) {
  .pie {
    .right-side {
      display: none;
    }
  }
}

.draw-progress(@progress, @color) when (@progress > 50) {
  .pie {
    clip: rect(auto, auto, auto, auto);

    .right-side {
      transform: rotate(180deg);
    }
  }
}

.draw-progress(@progress, @color) {
  .pie {
    .half-circle {
      border-color: @color;
    }

    .left-side {
      @rotate: @progress * 3.6;
      transform: rotate(~'@{rotate}deg');
    }
  }
}

.draw-progress--solid(@progress, @color, @bg) when (@progress <= 50) {
  &:before {
    background: @bg;
    transform: rotate((100 - (50 - @progress)) / 100 * 360deg * -1);
  }
}

.draw-progress--solid(@progress, @color, @bg) when (@progress > 50) {
  &:before {
    background: @color;
    transform: rotate((100 - @progress) / 100 * 360deg);
  }
}

.draw-progress--solid(@progress, @color, @bg) {
  background: linear-gradient(to right, @color 50%, @bg 50%);
}

HTML

<div class="set-size charts-container">
  <div class="pie-wrapper progress-30">
    <span class="label">30<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
  </div>

  <div class="pie-wrapper progress-60">
    <span class="label">60<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
  </div>

  <div class="pie-wrapper progress-90">
    <span class="label">90<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
  </div>

  <div class="pie-wrapper progress-45 style-2">
    <span class="label">45<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
    <div class="shadow"></div>
  </div>

  <div class="pie-wrapper progress-75 style-2">
    <span class="label">75<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
    <div class="shadow"></div>
  </div>

  <div class="pie-wrapper progress-95 style-2">
    <span class="label">95<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
    <div class="shadow"></div>
  </div>

  <div class="pie-wrapper pie-wrapper--solid progress-65">
    <span class="label">65<span class="smaller">%</span></span>
  </div>

  <div class="pie-wrapper pie-wrapper--solid progress-25">
    <span class="label">25<span class="smaller">%</span></span>
  </div>

  <div class="pie-wrapper pie-wrapper--solid progress-88">
    <span class="label">88<span class="smaller">%</span></span>
  </div>
</div>

Answer 2

使用图片精灵，所以技术上，你只加载一张图片。

Answer 3

我在图片上叠加了一个饼图段，并控制它的大小。如果可能，请确保其颜色与页面背景相同。

请参阅：https://codepen.io/sandeepshah/pen/eEqLpv

<div class="pie"></div>

.pie {
  position: absolute;
  width: 100px;
  height: 200px;
  overflow: hidden;
  left: 0;
  top: 0;
  transform-origin: left center;
}

.pie:BEFORE {
  content: "";
  position: absolute;
  height: 200px;
  width: 100px;
  left: -100px;
  border-radius: 100px 0 0 100px;
  transform-origin: right center;
  background-color: red;
  transform: rotate(60deg);
}

使用最终属性＆＃34;转换＆＃34;控制它的大小。

Answer 4

您可以使用html5画布（阅读this和this）。只需使用全明星的背景图像创建正方形，并使用jquery更改画布尺寸。或者用6幅图像创建div（星形的一角转向某个角度）。并且只显示某些部分（例如：50％隐藏3个图像）

使用css或javascript进行图像处理

4 个答案:

CSS

HTML