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

Question

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

Answer 1

一般来说，这是可能的。 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的浏览器支持此功能。

Answer 2

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

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

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

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

Answer 3

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

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

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