Прозрачный фон, непрозрачные элементы

Question

Я хочу иметь фоновое изображение на body и полупрозрачный фон на главном div, чтобы изображение было видно через него, но затенено. Тем не менее, самый простой

body {
  background-image: ...
}

#main {
  background-color: #999;
  opacity: 0.9
}

также сделает все в пределах #main непрозрачным, например, все содержащиеся img.

Как ты делаешь то, что я описываю?

Спасибо

Answer 1

rgba помогает вам, но не поддерживается всеми браузерами*

фон: rgba (255,0,0,0,5);

Answer 2

Если вы можете использовать CSS3 для своего проекта, вы можете использовать rgba ()

#main {
  background-color: rgba(0, 0, 0, .5)
}

Синтаксис rgba (красный, зеленый, синий, альфа).Это сделает фон #main прозрачным, но не содержимое.

Вот скрипка: http://jsfiddle.net/neilheinrich/FwxRX/

Answer 3

Если вы создаете полупрозрачный png-файл размером в пару пикселей и в цвет, который вам нужен, то добавьте его в качестве фонового изображения main и получите желаемый результат.