5

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 3

18

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.

2
  • And if the users browser doesn't supprot CSS3 is the opacity simply ignored?
    – Paul
    Commented Mar 26, 2012 at 15:44
  • 1
    Yes, a browser that does not understand a property, ignores that property Commented Mar 26, 2012 at 17:10
8

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.

1
  • 3
    Just for googlers: the .opacity() macro expects a value between 0 and 1 (lesselements.com)
    – fejese
    Commented Oct 9, 2014 at 9:21
3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.