Question

我希望用CSS设置样式，并且彼此相邻。我想为背景应用各种各样的颜色，但我希望下面的颜色与不透明度降低相同，所以我想到了这个：

span.foo{
    background-color: rgba(0,0,0,1); /*or whatever*/
    color:white;
}

span.foo:last-child{
    background-color: rgba(*,*,*,0.5); /*just an example*/
}

所以我想改变已定义背景的不透明度，而不是仅使用CSS3影响文本的不透明度。

这可能吗？

Answer 1

我相信没有办法做到这一点。

Css本身非常有限，你可以用它做的很多。

添加不透明度的唯一方法是：

opacity: 0.5

但上述内容也会影响文本本身，而不仅仅是背景。

但是，您可以将背景块与文本分开，以便保持文本的颜色不变。

编辑：请参阅小提琴：http://jsfiddle.net/YfSn7/30/

但这可能看起来有点荒谬，所以我不会建议使用它。

猜猜你必须接受这是不可能的，如果你真的想让事情更简单而不是过度复杂化。

Answer 2

没有办法做到这一点，过度重复值是CSS的失败之一。

因此，如果您的标准颜色为rgba(0,0,0,1);，则您需要rgba(0,0,0,0.5);作为透明版本。

你也许可以用一些javascript来做这样的客户端，但这并不完全干净。

Answer 3

可以使用JavaScript完成，如下所示：

export default function(){
return [
        {
        "catId":"parMenu1",
        "parentCat":"Bass",
        "subCats":[
            {
                "subCatId":"subMenu1",
                "subCatLabel":"base1"
            },
            {
                "subCatId":"subMenu2",
                "subCatLabel":"base2"
            },
            {
                "subCatId":"subMenu3",
                "subCatLabel":"base3"
            },
            {
                "subCatId":"subMenu4",
                "subCatLabel":"base4"
            }
        ]
    },
    {
        "catId":"parMenu2",
        "parentCat":"treb",
        "subCats":[
            {
                "subCatId":"subMenu1",
                "subCatLabel":"treb1"
            },
            {
                "subCatId":"subMenu2",
                "subCatLabel":"treb2"
            },
            {
                "subCatId":"subMenu3",
                "subCatLabel":"treb3"
            },
            {
                "subCatId":"subMenu4",
                "subCatLabel":"treb4"
            }
        ]
    },
    {
        "catId":"parMenu3",
        "parentCat":"drums",
        "subCats":[
            {
                "subCatId":"subMenu1",
                "subCatLabel":"drums1"
            },
            {
                "subCatId":"subMenu2",
                "subCatLabel":"drums2"
            },
            {
                "subCatId":"subMenu3",
                "subCatLabel":"drums3"
            },
            {
                "subCatId":"subMenu4",
                "subCatLabel":"drums4"
            }
        ]
    },
]

}

Answer 4

如果你想使用现代CSS：

--color_rgb: 0, 0, 0;
background-color: rgba(var(--color_rgb), 0.5));

但是仍然无法将alpha添加到给定的颜色，例如“其他一些样式表将这种颜色应用于RGB，Hex或其他”。

Answer 5

如果你有Sass：

background-color: rgba(white, 0.5);

Answer 6

您可以使用CSS变量：

span.foo {
    --background-color: 0, 0, 0;
    background-color: rgba(var(--background-color), 1);
    color: white;
}

span.foo:last-child {
    background-color: rgba(var(--background-color), 0.5);
}

将Alpha通道添加到给定颜色

6 个答案: