Прозрачное меню/панель навигации

Question

Я не могу решить проблему css.

У меня есть панель навигации, которая должна быть прозрачной. Но ссылки на нем также становятся прозрачными из-за атрибута непрозрачности и потому что они являются дочерними элементами прозрачной панели навигации.

может помочь мне решить эту проблему?

Answer 1

Если вы не хотите, чтобы ваш текст ссылки могут быть затронуты, вы должны изменить правила для .container селектор, чтобы посмотреть, как этот

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

он будет держать ваш дизайн цвет фона без ущерба для вашего текста Непрозрачность , а также сказал здесь несколько раз, влияет на элемент и его детей

Использование непрозрачности. Текст влияет

Использование RGBA (255,255,255,0.5), дети не пострадали

Позаботьтесь о других правил, которые могут принимать меры из-за ваших JavaScript и парят ситуации Fiddle here Bis spater

Answer 2

Решение легко. Просто установите для свойства background-color CSS значение transparent.

.nav { 
    background-color: transparent; 
} 

Answer 3

В css3 вы можете использовать прозрачный фон вместо того, чтобы сделать всю панель прозрачной.

Чтобы добавить прозрачный цвет, вы можете сделать: rgba(255,255,255,.5), где .5 - непрозрачность.

Answer 4

Я использую прозрачное изображение png (bg.png) с желаемой непрозрачностью, и ca ll вот так:

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

Изображение png может быть маленьким, даже 1x1 пиксель. repeat - это полное заполнение поля background.

Answer 5

Вы должны попробовать просто свойство css background.

.navbar 
{ 
    background-color: transparent; 
}