CSS：對於另一個類似的徑向梯度，切片徑向漸變50％在底部？

body { 
    width: 100vh; height: 100vh; 
    background-image: radial-gradient(circle closest-side, #00bffb, rgba(0, 0, 0, 1)); 
}

我怎麼能有這樣的事情，而不是？：

這是不可能在這種情況下編輯HTML太多，因爲它是一個Linux的主題。

來源

2017-08-01 DIES

你可以簡單地把一個黑色的股利超過了一半。一定要用z-index來推進它 – DMrFrost

@DMrFrost「編輯HTML'是不可能的，如果可以的話，我會做的。 – DIES

蓋的線性梯度

油漆在其頂部上半透明的，一半黑線性梯度。

.bg { 
 
    width: 100vh; 
 
    height: 100vh; 
 
    background: linear-gradient(to bottom, transparent 50%, black 50%), 
 
       radial-gradient(circle closest-side, #00bffb, black); 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div class="bg"></div>

或者

蓋上僞元素

如果要創建具有不同顏色的兩半，可以徑向漸變使用父元素高度的一半的僞元素。

.bg { 
 
    position: relative; 
 
    width: 100vh; 
 
    height: 100vh; 
 
    background: radial-gradient(circle closest-side, yellow, black); 
 
} 
 

 
.bg::before { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100vh; 
 
    height: 50%; 
 
    background: radial-gradient(circle closest-side, #00bffb, black); 
 
    background-size: 100% 200%; /** we need to compensate for the 50% height **/ 
 
    content: ''; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div class="bg"></div>

來源

2017-08-01 20:15:06

看起來很有趣，謝謝。我會研究這一點。 – DIES

我已經添加了另一個選項，如果您想要有2個線性漸變，可能會更合適。 –

CSS：對於另一個類似的徑向梯度，切片徑向漸變50％在底部？

回答

相關問題