以線性漸變計算不適用於IE/Edge

Question

IE和Edge似乎無法在此漸變中正確計算高度。有沒有人有辦法解決嗎？

background: linear-gradient(180deg, rgba(255,255,255,0) 100px, #f5f5f5 100px, #f5f5f5 calc(100% - 100px), rgba(255,255,255,0) calc(100% - 100px)); 

Answer 1

在這種情況下，因爲使用的是透明的「條紋」，可以通過使用線性梯度都只會50高度的％欺騙。

你開始一個從頂部和底部

div { 
 
    height: 100vh; 
 
    background: 
 
    linear-gradient(180deg, transparent 100px, #f5f5f5 100px, #f5f5f5 50%, transparent 50%), 
 
    linear-gradient(0deg, transparent 100px, #f5f5f5 100px, #f5f5f5 50%, transparent 50%); 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: pink; /* for demo purposes */ 
 
}

<div></div>

Codepen Demo

第二