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

解决第二个问题时，我用百分比而不是像素使它变得更平滑：

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

旧的：

​

​

新的：

​

​