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

Original
New

旧：

新：