In CSS3, using `transparency` with `gradient` doesn't work?

Question

Here is the jsfiddle:

http://jsfiddle.net/txj54fL9/

Codes pasted below:

.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>

As can be seen in the demo, the cover doesn't display at all. If I change the rgb(0,0,255,0.5) to rgb(0,0,255), the cover can show, but it loses the transparency..

Does anyone have ideas about how to keep transparency as well as gradient?

Answer 1

Use RGBA instead

.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's answer's the solution, and remember, you can still use opacity:0.5; for any element.

Take a look here