Как получить непрозрачное фоновое изображение на div?

Question

У меня есть <div>, который содержит кучу <p> s и хотел бы иметь непрозрачное фоновое изображение за текстом, масштабированное для заполнения всего <div>. То есть независимо от того, сколько текста я добавляю или удаляю, изображение должно расти или сжиматься, чтобы покрыть весь фон <div>.

И только изображение должно иметь непрозрачность. Текст в div должен быть сплошным черным.

Как мне это сделать, пожалуйста? (и мне нужно беспокоиться о браузерах, которые не поддерживают CSS3?)

Answer 1

[Ответить] от o.p.

Я отступил назад и посмотрел на проблему другим способом и нашел ответ, который является кросс-браузером и не нуждается в CSS3.

Я запустил The Gimp и добавил opactiy в изображение! Точно то, что я пытался сделать, без каких-либо фантазийных CSS3 ;-)

Большое спасибо за помощь @ JSW189. Надеюсь, вы не возражаете, чтобы я опубликовал ваш ответ, но это решение, которое я выбрал.

---

Вы хотите использовать background-image свойство, чтобы добавить изображение, затем background-size:100% иметь фоновое изображение заполняет весь DIV.

div { 
    background-image:url('image_url_goes_here.jpg'); 
    background-size: 100%; 
} 

JS Fiddle Example.

Кроме того, если вы хотите переключиться с непрозрачностью, вы можете использовать свойство opacity. По умолчанию установлено значение opacity:1 (непрозрачный), но вы можете изменить это, переключив непрозрачность между 1 и 0. Так, например, если вы хотите непрозрачность 50%, вы должны использовать opacity:.5.

Opacity JS Fiddle Example.

Отметьте, что background-size является собственностью CSS3. Вы можете увидеть browser compatibility chart here. Однако эта проблема может быть решена такими библиотеками, как modernizr.