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.
3 Answers
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.
-
And if the users browser doesn't supprot CSS3 is the opacity simply ignored?– PaulCommented Mar 26, 2012 at 15:44
-
1Yes, a browser that does not understand a property, ignores that property Commented Mar 26, 2012 at 17:10
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.
-
3Just for googlers: the
.opacity()
macro expects a value between 0 and 1 (lesselements.com)– fejeseCommented Oct 9, 2014 at 9:21
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.