How do they use opacity on right menu?
http://pupunzi.com/ How do they use opac开发者_JAVA百科ity for menu& Why text can change opacity without changing menu-background opacity?
Below is the style they use, as you can see the rgba
color space which accepts arguments of red, green, blue and alpha, where alpha is the transparency channel.
#navigation #menu {
position: absolute;
top: 0;
left: 5px;
padding: 35px;
/*padding-top: 50px;*/
border-left: 1px solid rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.3);
/* IE10 */
background: -ms-radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%);
/* Mozilla Firefox */
background: -moz-radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%);
/* Opera */
background: -o-radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%);
/* Webkit (Safari/Chrome 10) */
background: -webkit-gradient(radial, left top, 0, left top, 1017, color-stop(0, rgba(255, 255, 255, 0.9)), color-stop(.75, rgba(38, 150, 165, 0.1)));
/* Webkit (Chrome 11+) */
background: -webkit-radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%);
/* Proposed W3C Markup */
background: radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%);
width: 100%;
height: 100%;
-moz-box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4);
-o-box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4);
box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4);
}
It is the fourth grouping rgba(255, 255, 255, x.x)
you use 0.1 - 0.9 as your scale. 0.1 being 10%, 0.5 50% and so on.
精彩评论