opacity in a speech bubble in css

I'm using http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ to do a speech bubble, I want the inside of the bubble and the triangle to have a background with an opacity of 0.7.

For the background I'm using: background-color: rgba(0, 0, 0, 0.7);

and for the triangle: opacity:0.7;

But it seems that the triangle and the background doesn't have the same opacity, I put a higher z-index to the triangle but it doesn't help.

My full css are:

.infoBubble {
    font-family:arial;
    font-size:12px;
    color:#FFFFFF;
    display: inline-block;
    position: absolute;
    padding:6px;
    background-color: rgba(0, 0, 0, 0.7);
    background:-moz-linear-gradient(#000, #000);
    background:-o-linear-gradient(#000, #000);
    background:linear-gradient(#000, #000);
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
    box-shadow: 1px 1px 3px black;
}

.infoBubble:after {
    content:"";
    position:absolute;
    bottom:-6px;
    left:20px; 
    opacity:0.7;
    border-width:6px 6px 0; 
    border-style:solid;
    border-color:#000 transparent;
    display:block; 
    width:0;
}

here a jsFiddle: http://jsfiddle.net/malamine_kebe/QzQzW/

thanks for helping!

Answers


It's because your opacity of the main bubble is not being applied - your three styles:

background:-moz-linear-gradient(#000, #000);
background:-o-linear-gradient(#000, #000);
background:linear-gradient(#000, #000);

are overwriting the

background-color: rgba(0, 0, 0, 0.7);

http://jsfiddle.net/QzQzW/1/

also if you use

-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
-webkit-filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.7));
filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.7));

instead of

box-shadow: 1px 1px 3px black;

it will make your shadow work properly

http://jsfiddle.net/QzQzW/4/


Need Your Help

Accessing instance variables using index

python python-2.6

I have a class which keeps track of errors encountered during a search operation

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.