opacity in a speech bubble in css -


i'm using http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ speech bubble, want inside of bubble , triangle have background opacity of 0.7.

for background i'm using: background-color: rgba(0, 0, 0, 0.7);

and triangle: opacity:0.7;

but seems triangle , background doesn't have same opacity, put higher z-index triangle 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 jsfiddle: http://jsfiddle.net/malamine_kebe/qzqzw/

thanks helping!

it's because opacity of main bubble not being applied - 3 styles:

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

are overwriting

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

http://jsfiddle.net/qzqzw/1/

also if 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 make shadow work properly

http://jsfiddle.net/qzqzw/4/


Comments

Popular posts from this blog

php - Why I am getting the Error "Commands out of sync; you can't run this command now" -

linux - Does gcc have any options to add version info in ELF binary file? -

java - Are there any classes that implement javax.persistence.Parameter<T>? -