html - 背景渐变圆形进度条

Question

我有以下圆形进度条，由于背景渐变，它的颜色有点困惑(白色是进度，其余橙色最好与背景相同):

我通过使用两个圆圈和外圈上的两个线性渐变实现了这一点，其度数是根据进度动态生成的。问题源于背景颜色本身就是渐变。我为此使用的 css 如下:

html, body {
    background-image: linear-gradient(141deg, #e24a00 0%, #f6891f 71%, #fcb732 100%);
    background-attachment:fixed;
}

    .learn-prog {
background-image:
        <% learn_hash = learn_degrees(@my_today_flashcards, current_user.words_per_day) %>
        linear-gradient(<%= learn_hash[:degrees]  %>deg, <%= learn_hash[:color] %> 50%, transparent 50%),
        linear-gradient(-90deg, white 50%, transparent 50%);
}

为 learn_hash 生成度数/着色的代码在这里(我必须这样做，因为梯度不能超过 50%，否则它开始倒退):

def color_and_degrees(decimal_completed)
    todo_degrees = todo_degrees(decimal_completed)
    is_over_half = ((todo_degrees/180) > 0 ? true : false)
    if is_over_half
      {:color => 'white', :degrees => (todo_degrees - 180)}
    else
      { :color => 'rgba(246, 137, 31, 1)', :degrees => todo_degrees }
    end
  end

  def todo_degrees(decimal_completed)
    degrees = (360) * (decimal_completed)
    degrees - 90
  end

  def learn_degrees(todays_flashcards, words_per_day)
    #cards_created_today / words_per_day
    if words_per_day == 0
      decimal_completed = 1.0
    else
      decimal_completed = todays_flashcards.size / words_per_day.to_f
      decimal_completed = 1.0 if decimal_completed >= 1.0
    end
    color_and_degrees(decimal_completed)
  end

任何关于如何使颜色匹配的想法都会很棒。感谢和欢呼，迈克尔

Answer 1

最简单的方法是在您的文本和外层蓝色圆圈之间留出透明间隙。
radial-gradient() 允许 ( MDN )。

Codepen

相关部分:

背景图像:径向渐变(
最近的一面，
白色 90%,
透明90%，透明95%，
石板蓝 95%, 石板蓝 100%);


closest-side 是必需的，因为它是一个圆盘。径向渐变的默认值是在拐 Angular 处有 100%，它们明显远离圆盘，所以在 70.7%(对 Angular 线的一半 = sqrt(2)/2)之后你不会看到渐变。

我没有添加你的循环进度条，但我希望它在多背景下仍然能很好地工作:)

演示:

html, body {
    background-image: linear-gradient(141deg, #e24a00 0%, #f6891f 71%, #fcb732 100%);
    background-attachment:fixed;
}

    .learn-prog {
      display: flex; /* centering text */
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      width: 400px;
      height: 400px;
background-image:
        radial-gradient(closest-side, white 90%, transparent 90%, transparent 95%, slateblue 95%, slateblue 100%);
      border: 1px solid #000; /* visualize boundary of elements */
}

<div class="learn-prog">HELLO</div>

<div class="learn-prog" style="margin-left: auto">MOVE</div>