I stumbled onto this site: and started thinking. Is this possible using twitter's bootstrap? I don't see an opacity setting in the css file? Is it as easy as adding it.
in your bootstrap. css find the navbar you are using, for example, if you're using the default navbar search for . navbar-default or . navbar-inverted as per your case and set the opacity simply using the CSS opacity command.
Edit the value (number) for opacity level, 0.0 is fully transparent and 1.0 is fully opaque. If using RGBA instead of HEX VALUES ( #FFFFFF ) or Template Designer ( $(tabs. background.
The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, . 5 is 50% visible, and 0 is completely transparent. Set the opacity of an element using . opacity-{value} utilities.
In general, this is possible. Testflightapp uses the background-color: rgba
attribute with an opacity level.
So if you want to set a background color with opacity to on of you element use this CSS:
elementname {
background-color: rgba(128, 128, 128, 0.5); /* Red [0-255], Green [0-255], Blue [0-255], Alpha [0-1] */
}
If you want to set the opacity on the element as a whole use:
elementname {
opacity: 0.5; /* opacity [0-1] */
-moz-opacity: 0.5; /* opacity [0-1] */
-webkit-opacity: 0.5; /* opacity [0-1] */
}
This is only supported by browsers that support CSS3.
A late answer, but I just found this question whilst looking up something very similar.
If you're using bootstrap with less, so that you're building the css yourself as part of an asset pipeline you should set opacity using the utility macro.
selector {
.opacity(50); /* opacity [0->100] */
}
It'll define the correct browser prefixes, including the IE filter syntax for you.
If you are using bootstrap with sass. You can use the opacity mixin.
@include opacity([from 0-100]);
This will take handle all browser compatibilities (if supported) dealing with opacity.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With