Making text and its parent item with different opacity using bootstrap

I’m using the ‘well’ class from bootstrap.  Since in this case I have a background image behind the well, I wanted to make it somewhat transparent.  But the text in the well becomes really hard to see:

Screen Shot 2014-02-14 at 5.46.50 AM

So I wanted to keep the text and buttons inside the well with opacity at 1.0.  How can I do this? Well first, instead of using the opacity value in the css file, us the background-color with its rgba values (a meaning the alpha value, or transparency), like this:

.well {
background-color: rgba(39, 174, 96, 0.6);
}

Then, I put everything inside the well in another class. I called it field

.field {
opacity: 1.0;
}

And now the well stays transparent, but everything else inside is not transparent.

Screen Shot 2014-02-14 at 5.54.37 AM

Also, if your changes to the css don’t seem to be showing up in your rails app, don’t forget to precompile your assets:

rake assets:precompile

or

rake assets:precompile RAILS_ENV=production for heroku or your production environment.

Some credit goes to this site.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: