Css 如何在元素上实现淡入不透明度？

我知道，我的问题有点模糊，但在你否决我之前，请让我解释一下：

我目前正在学习jQuery，并开发了自己的coverflow_滑块。它的228行长，工作非常好，目前我正在努力设计它更好一点。目前，它看起来是这样的：

这是按钮的my.css：

.left, .right {
    position: absolute;
    z-index: 20;
    background-color: #000;
    height: 100%;
    width: 30px;
    opacity: 0.5;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

现在你看到两边的两条灰色条纹了吗？这些是左/右按钮。现在我希望他们有某种转变。应该是这样的：

---

请求可能很简单，我只是不知道我应该在谷歌输入什么来找到它。我更像是一个php开发人员，不参与所有这些设计工作。我知道这个帖子可能会让我损失50%的声誉，因为我投了反对票，但我想这值得一个答案。

你可以使用CSS3背景渐变。有很多在线CSS3背景梯度生成器，例如。在某些参数（例如水平、#999999到#FFFFFF等）中打孔会导致以下结果：

背景：#99999；
背景：-moz线性梯度（左，#999999 0%，#ffffff 100%）；
背景：-webkit渐变（线性、左上、右上、颜色停止（0%，#999999）、颜色停止（100%，#ffffff））；
背景：-webkit线性梯度（左，#999999 0%，#ffffff 100%）；
背景：-o-线性梯度（左，#999999 0%，#ffffff 100%）；
背景：-ms线性梯度（左，#999999 0%，#ffffff 100%）；
背景：线性梯度（向右，#999999 0%，#ffffff 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#999999'，endColorstr='#ffffff'，GradientType=1）；

css渐变呢？这应该会有帮助-渐变。。。我不知道他们是怎么称呼的。^^谢谢大家。真是太棒了。在我的startpost上没有反对票，这就像是生日一样。非常感谢。：）