How to make semi transparent boxes around gallery categories?

Question

After I got rid of the boxes and their borders on my page (forum), I'm now trying to make them semi-transparent so that the background picture can be seen through. These guys gave me a hint what might help. The problem is that it doesn't work out to get just the background of the box semi-transparent.

Inserting this to CSS leads to everything beeing semi transparent including gallery description and thumbnails.

.boxBottom, .boxTop, .box 
{color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
opacity: 0.5;}

That code should change just the background opacity but it leads to a grey box and no transparency can be noticed.

color: rgb(0, 0, 0);
background-color: rgba(255, 255, 255, 0.5);

This part of code brings up a bright, white box that's still not transparent.

color: rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);

Where's my error in reasoning?

Answer 1

the code that you have that "should" change the background opacity is correct, but you may not be seeing the transparency because you're only @ 50%. if you update it to 0.2, or a lower number (lower numbers = more transparency; 0.2 = 20% fill)

the code you have:

.boxBottom, .boxTop, .box 
{background:none !important}

the code that might be closer to what you want:

.boxBottom, .boxTop, .box 
{ background: rgba(255, 255, 255, 0.2) !important; }

also be careful... a few lines later you have (twice)

.box {background-color: none;} 

which conflicts with the style you just made, which is why you need the !important to get the first style to work. the best solution would be to take the !important out of the first style, and remove the .box standalone definitions.