Transparent menu / navigation bar

Question

I can not solve the css problem.

I have a navigation bar that should be transparent. But links to it also become transparent due to the opacity attribute and because they are children of a transparent navigation bar.

can help me solve this problem?

Answer 1

If you do not want your link text to be affected, you must modify the rule for the .container selector to look like this:

.container { width: 100%; height: 90px; margin: 0 auto; background-color: rgba(255,255,255,0.5); } 

It will keep your background color without affecting your text. Opacity, as stated here several times, affects the element and its children.

Use opacity. Text affected

Using rgba (255,255,255,0,5), children were not hurt

Take care of other rules that may take action due to your javascript and hover feed situations here Bis spater

Answer 2

The solution is easy. Just set the background-color CSS property to transparent .

 .nav { background-color: transparent; } 

Answer 3

In css3, you can use transparent backgrounds instead of making the entire panel transparent.

To add a transparent color, you can do: rgba(255,255,255,.5) , where .5 is the opacity.

Answer 4

I use a transparent png image (bg.png) with the desired opacity and call it like this:

 .menu { background: url('bg.png') repeat; } 

A png image can be small, even 1x1 pixel in size. repeat is to completely fill the background space.

Answer 5

You should try just the css background property.

 .navbar { background-color: transparent; }