Question

http://pupunzi.com/ 他们如何使用不透明度菜单和＆amp;为什么文字可以在不改变菜单背景不透明度的情况下改变不透明度？

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, x.x)。 0.1为10％，0.5％为50％等。

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

2 个答案: