CSS對父顏色透明

在這裏，你看到header與background顏色漸變：

background: linear-gradient(to right, #827099 0%, #dc5562 100%)

我也有span與模仿其背後的背景顏色:before的CSS屬性。

這樣做的目的是作爲單詞「THIS」的一部分獲得「剪切」特徵。您會注意到「T」的左上角部分丟失或更像隱藏在:before屬性後面。

我遇到的問題是，由於背景色爲linear-gradient，當屏幕寬度的變化，所以沒有線性漸變（你可以通過瀏覽器窗口小見）

這種變化漸變不反映在:before屬性上，它不再匹配背景顏色。

有沒有辦法解決這個問題，同時保持背景的線性漸變？

來源

2017-05-18 steve Kim

您可以嘗試採用同樣的梯度剪輯三角形和給它的是線與背景漸變的更多或更少的比例較大 - 但這一比例將是相對clip-triangle，並且您需要添加一個JavaScript偵聽器來重新計算瀏覽器調整大小時的漸變百分比（在三角形上），或者它不匹配。 – admcfajn

不知道這是否是您的用例的選項，但您可以設置線性漸變以確保在清除切口之後顏色變化不會發生。

您可以將漸變中的第一站設置爲填充寬度（118px）加上剪貼邊框寬度（21px），然後將剪貼邊框顏色更改爲與第梯度。在下面的例子中，我將它們四捨五入爲140px。

https://jsfiddle.net/6dvy7dks/

.head { 
    background: linear-gradient(to right, #827099 140px, #dc5562 100%); 
} 

span.first:before { 
    border-top-color: #827099; 
    border-left-color: #827099; 
}

來源

2017-05-18 02:48:51 Pango

CSS對父顏色透明

回答

相關問題