如何实现元素的渐变不透明度？

Question

如何实现元素的渐变不透明度？

5

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

我目前正在学习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;
}

现在您看到两个灰色条纹了吗？这些是左/右按钮。现在我希望它们有某种过渡效果。它应该像这样： The goal

这个请求可能非常简单，我只是不知道应该在Google中输入什么来找到答案。我更多的是PHP开发人员，而不是涉及所有这些设计内容的人。我知道这个帖子可能会因为负评而让我失去50个声望，但我认为这值得获得一个答案。

- Realitätsverlust

2

CSS渐变如何处理？ - chris

2

这应该会有所帮助 - http://www.colorzilla.com/gradient-editor/ - wickywills

渐变...我不知道它们叫什么。^^ 非常感谢大家。 - Realitätsverlust

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Salman A · Accepted Answer

您可以使用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);