Полупрозрачный фон от непрозрачного изображения - PullRequest
Новая
       15

Полупрозрачный фон от непрозрачного изображения

3 голосов
/ 16 июня 2011

У меня есть загруженное пользователем изображение (почти всегда 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, но это нарушает шаблон, в котором все готово.

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

1 Ответ

2 голосов
/ 16 июня 2011

Вместо того, чтобы тянуть контент поверх этого изображения, почему бы просто не добавить обертку вокруг вашего контента и поместить изображение в качестве фона этой обертки? Затем вы можете добавить полупрозрачный фон к своему контенту, чтобы сделать его более разборчивым (при этом все еще имея возможность видеть изображение под ним). Попробуйте: 

<div class="wrapper" style="background-image: url(example.jpg);" >
    <div class="content">
        ...
    </div>
</div>

CSS: 

.wrapper { background: none 0 0 no-repeat; }
.content { background: url(transparency.png); }

Надеюсь, это не слишком смущает!

...