他们如何使用右侧菜单的不透明度？

Question

http://pupunzi.com/ 他们如何使用菜单和菜单的不透明度？为什么文本可以改变不透明度而不改变菜单背景的不透明度？

Answer 1

下面是他们使用的样式，您可以看到 rgba 颜色空间，它接受红色、绿色、蓝色和 alpha 参数，其中 alpha 是透明度通道。

#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);

}

Answer 2

这是您使用 0.1 - 0.9 作为比例的第四个分组 rgba(255, 255, 255, xx)。 0.1 为 10%，0.5 为 50%，依此类推。