在CSS3中，使用`transparency`和`gradient`不起作用吗？

Question

下面是jsfiddle：

http://jsfiddle.net/txj54fL9/

代码粘贴如下：

​

.cover {
    background: linear-gradient(to bottom, rgb(0,0,255,0.5), rgb(238,130,238,0.5));
    background: -webkit-linear-gradient(top, rgb(0,0,255,0.5), rgb(238,130,238,0.5));

    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    position: absolute;
}

<h2> I'm bottom</h2>
<div class="cover"></div>

​

在演示中可以看到，封面根本不显示。如果我将rgb(0,0,255,0.5)更改为rgb(0,0,255)，则可以显示封面，但会失去透明度。

有没有人知道如何保持透明度和渐变？

Answer 1

请改用RGBA

.cover {
    background: linear-gradient(to bottom, rgba(0,0,255,0.5), rgba(238,130,238,0.5));
    background: -webkit-linear-gradient(top, rgba(0,0,255,0.5), rgba(238,130,238,0.5));

    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    position: absolute;
}

http://jsfiddle.net/txj54fL9/1/

Answer 2

Pikamander2的答案就是解决方案，记住，你仍然可以对任何元素使用opacity:0.5;。

看一看here