CSS - 部分背景填充

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> 

最初，按鈕看起來正確。當用戶點擊「運行」按鈕時，我在特定點添加btn-50。但是，這種風格看起來不正確。我的意圖是讓橙色部分位於現有漸變的頂部。但是，發生了什麼事是按鈕的背景變成橙色和白色。

有沒有辦法讓我有一種像按鈕三層的樣子？類似這樣的：

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

我希望我的內容不失真。我也希望用戶仍然能夠與按鈕進行交互。我也想要原來的效果。我只需要在那裏插入橙色來以某種方式指示百分比。

有沒有辦法通過HTML和CSS做到這一點？

Answer 1

如果您想要將橙色部分（第二個漸變）放在現有漸變的頂部，那麼您需要將多個背景設置爲一個元素，如下面的代碼片段（以逗號分隔的格式，其中指定了第一個漸變形成最頂層，最後一層變成底層）並且不覆蓋background設置。

在當前的代碼段當加入btn-50類，在其內指定的background梯度覆蓋由btn指定的一個。

注：

1. 無論你的梯度實際上有一個alpha部分（換句話說，它們不是透明的），因此，即使你加在現有的梯度頂部的橙色漸變，它不會有太多的視覺效果。
2. 你應該注意的另一件事是梯度本身有不同的行爲。所述第一梯度是不是一個硬停止梯度（即，逐漸0%和100%之間的顏色變化），而第二是一個硬停止梯度（即，直到50%第一顏色將被示出和在50%它突然變成橙色並保持橙色直到100%）。
3. 另一件您可以嘗試的做法是將#fcfcfc（也包含橙色的漸變）替換爲透明。這也將使底層顯示。我也在代碼片段中添加了一個樣本。

.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%); 
 
}

<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>