я есть загруженное пользователем изображение (почти всегда JPEG), которое я хотел бы использовать в качестве фона. Чтобы сделать его менее отвлекающим и сделать содержимое над ним разборчивым, я пытаюсь уменьшить его непрозрачность. По сути, я хотел бы что-то с эффектом, как сплошной цветrgba.

Я попытался поместить фон в div с отрицательным нижним полем сверху, потянув за него содержимое

<div style="height: 200px; bottom: -200px; background: url(example.jpg) no-repeat; opacity: 0.5;"></div>
<!-- page content -->

Тем не менее, это кажется хакерским и только частично работает. Это именно то что я хочу покаopacity брошен туда; это ставит div на вершине. (Какopacity влияет на расслоение !?)

я считалposition: absolute для фона div и содержания, чтобы я мог играть сz-index но это ломает шаблон, это все в.

Как мне сделать это изображение полупрозрачным фоном?