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

Question

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

我正在学习jQuery，我开发了自己的coverflow_slider。它的228线长，工作得非常好，目前正在努力设计它更好一点。目前，它看起来像这样：

这是我的.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;
}

所以现在你看到两侧有2条灰色条纹？这些是左/右按钮。现在我希望他们有一些过渡。它应该是这样的：

请求可能非常简单，我只是不知道我应该在谷歌中输入什么来找到它。我是一个php开发人员，并没有参与所有这些设计。我知道这个帖子会因为downvotes而花费我50美元的声誉，但我想这值得得到答案。

Answer 1

您可以使用CSS3背景渐变。有很多在线CSS3背景梯度生成器，例如http://www.colorzilla.com/gradient-editor/。在一些参数（例如水平，＃999999到#FFFFFF等）中打孔会产生以下结果：

background: #999999;
background: -moz-linear-gradient(left, #999999 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#999999), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left, #999999 0%,#ffffff 100%);
background: -o-linear-gradient(left, #999999 0%,#ffffff 100%);
background: -ms-linear-gradient(left, #999999 0%,#ffffff 100%);
background: linear-gradient(to right, #999999 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#ffffff', GradientType=1);