我可以在twitter bootstrap中更改导航栏的不透明度吗?

时间:2012-03-26 13:56:30

标签: css twitter-bootstrap opacity

我偶然发现了site:并开始思考。这可能是使用twitter的bootstrap吗?我没有在css文件中看到不透明度设置?是否像添加它一样容易。

3 个答案:

答案 0 :(得分:18)

一般来说,这是可能的。 Testflightapp使用具有不透明度级别的background-color: rgba属性。

因此,如果你想设置一个不透明度的背景颜色,你可以使用这个CSS:

elementname {
    background-color: rgba(128, 128, 128, 0.5); /* Red [0-255], Green [0-255], Blue [0-255], Alpha [0-1] */
}

如果要将元素的不透明度设置为整体使用:

elementname {
    opacity: 0.5; /* opacity [0-1] */
    -moz-opacity: 0.5; /* opacity [0-1] */
    -webkit-opacity: 0.5; /* opacity [0-1] */
}

仅支持CSS3的浏览器支持此功能。

答案 1 :(得分:8)

一个迟到的答案,但我只是在查找非常类似的东西时发现了这个问题。

如果您使用较少的bootstrap,那么您自己构建css作为资产管道的一部分,则应使用实用程序宏设置不透明度。

selector {
    .opacity(50);   /* opacity [0->100]  */
}

它将为您定义正确的浏览器前缀,包括IE过滤器语法。

答案 2 :(得分:3)

如果你正在使用带有sass的bootstrap。您可以使用不透明度混合。

@include opacity([from 0-100]);

这将处理处理不透明度的所有浏览器兼容性(如果支持)。