Question

我有一个按钮，我试图通过CSS动画。我的按钮，目前定义如下：

<style>
  .btn {
    color: #333;
    background-color: #fcfcfc;
    background-image: linear-gradient(to bottom,#fcfcfc 0,#f1f1f1 100%);
  }

  .btn-50 {  
    background: -webkit-linear-gradient(#fcfcfc 50%, orange 50%);
  }
</style>

<button class="btn"><i class="icon run"></i>Run</button>

最初，按钮看起来正确。当用户点击＆＃34;运行＆＃34;按钮，我在特定点添加btn-50。但是，这种风格看起来不正确。我的目的是让橙色部分位于现有渐变之上。然而，正在发生的事情是按钮的背景变为部分橙色和部分白色。

我有办法让按钮有三层吗？像这样：

[content]
[orange fill]
[original background gradient]

我希望我的内容不会失真。我还希望用户仍然能够与按钮进行交互。我也想要原有的效果。我只需要在那里插入橙色以表示百分比。

有没有办法通过HTML和CSS来做到这一点？

Answer 1

如果您希望橙色部分（第二个渐变）位于现有渐变之上，则需要为元素设置多个背景，如下面的代码段所示（以逗号分隔格式，其中第一个渐变指定形式最顶层，最后一层成为底层），不覆盖background设置。

在添加btn-50类的当前代码段中，其中指定的background渐变会覆盖btn指定的渐变。

注意：

你的渐变都没有alpha部分（换句话说，它们不是透明的）所以即使你在现有渐变的顶部添加橙色渐变，也不会有太多的视觉效果效果。
你应该注意的另一件事是渐变本身有不同的行为。 第一个渐变不是硬停止渐变（也就是说，颜色在0%和100%之间逐渐变化）而第二个渐变是硬停止渐变（也就是说，直到显示50%第一种颜色，50%它突然变为橙色，并保持橙色直到100%）。
您可以尝试做的另一件事是用透明替换#fcfcfc（在包含橙色的渐变中）。这也将使底层显示出来。我还在代码段中添加了一个示例。

＆＃13;

.btn {
  color: #333;
  background-color: #fcfcfc;
  background-image: linear-gradient(to bottom, #fcfcfc 0, #f1f1f1 100%);
}
.btn-50 {
  background: linear-gradient(#fcfcfc 50%, orange 50%), linear-gradient(to bottom, #fcfcfc 0, #f1f1f1 100%);
}
.btn-50v {
  background: linear-gradient(rgba(251, 251, 251, 0.75) 50%, rgba(255, 201, 14, 0.75) 50%), linear-gradient(to bottom, #fcfcfc 0, #f1f1f1 100%);
}
.btn-50t {
  background: linear-gradient(transparent 50%, rgba(255, 201, 14, 0.75) 50%), linear-gradient(to bottom, #fcfcfc 0, #f1f1f1 100%);
}
.btn-50v2 {
  background: linear-gradient(rgba(251, 251, 251, 0.75) 50%, rgba(255, 201, 14, 0.75) 50%), linear-gradient(to bottom, red 0, blue 100%);
}

＆＃13;

<h3>Initial State</h3>
<button class="btn"><i class="icon run"></i>Run</button>

<h3>After btn-50 class is added</h3>
<button class="btn btn-50"><i class="icon run"></i>Run</button>

<h3>After btn-50 class is added with transparent top part</h3>
<button class="btn btn-50t"><i class="icon run"></i>Run</button>

<h3>After btn-50 class with semi-transparent top gradient</h3>
<button class="btn btn-50v"><i class="icon run"></i>See the gray of bottom layer showing through the top (above the orange)</button>

<h3>After btn-50 class with semi-transparent top gradient and different bottom layer</h3>
<button class="btn btn-50v2"><i class="icon run"></i>You can see how colors in the bottom layer are seen through the top layer</button>

＆＃13;

CSS - 部分背景填充

1 个答案: