CSS3線性漸變

Question

請看這個頁面： http ： //d.pr/i/GA5V

問題在於頁面內容的這些梯度。 在此屏幕截圖中，漸變如下：

linear-gradient(to right, rgba(0,0,0,1) 0px, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 970px, rgba(0,0,0,1) 1000px);

有兩個問題：

1 - 漸變的極值（0px和1000px）不應該變黑。 它們應該是透明的，但是我的意思是包裝頁面內容的白色div的極端應該是透明的並且顯示主頁面的背景（這是一種暗圖像紋理）。 如果我把rgba（0,0,0,0）放在極端，背景將對白色div透明（導致一個完全白色的div）。 它應該是這樣的：

linear-gradient(to right, MakeCurrentElementTransparent 0px, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 970px, MakeCurrentElementTransparent 1000px);

2 - 漸變似乎不是很平滑。 我可以在里面看到垂直的彩條。 有沒有辦法讓CSS3中的這些線性漸變更平滑（我的意思是，使顏色過渡更加平滑）？

Answer 1

解決問題＃2，我用百分比而不是像素來使它變得更平滑：

linear-gradient(to right, rgba(0,0,0,1) 0px, rgba(255,255,255,1) 30px, rgba(255,255,255,1) calc(100% - 30px), rgba(0,0,0,1) 100%)

原版的
新

舊：

新：