与梯度的圆进展酒吧在背景中

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

相关部分：

background-image: radial-gradient( closest-side, white 90%, transparent 90%, transparent 95%, slateblue 95%, slateblue 100%);

closest-side是必需的，因为它是一张光盘。径向渐变的默认值是拐角处有100％，它们远远超出光盘，所以在70.7％（对角线的一半= sqrt（2）/ 2）之后你不会看到渐变。

我没有添加你的循环进度条，但我希望它仍能很好地与multibackground一起工作：）

演示：

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;