Наложение прозрачного изображения на кликабельные ссылки

Question

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

Я могу придумать несколько способов, которыми это можно сделать, но я не уверен, что это лучший способ сделать это.Возможно, есть и другой способ, который я тоже не рассматривал.Вот что я думаю сделать:

1. Очень осторожно обрежьте изображение растения, чтобы оно выглядело как изображение с желтым фоном, а затем оставшаяся часть растения появилась как частьфона внутренней рамки.

2. Наложение изображения растения на текст (возможно, с использованием z-index?), также сделайте навигационное меню графическим (чтобы оно отображалось спереди)), а затем используйте отображение изображений для выбора ссылок.

Любые другие идеи будут с благодарностью.Мое решение, вероятно, должно быть совместимо с обычными подозреваемыми браузерами (скажем, IE> 7/8).Спасибо.

Answer 1

Вы можете выбрать вариант номер один, за исключением того, что вам не нужно обрезать изображение.

Вы можете просто применить одно и то же фоновое изображение к обоим div с, и браузер позаботится об этом.отсечения для вас.Вам нужно будет предоставить точно правильные px смещения для двух фонов.

Вот очень грубая демонстрация: http://jsfiddle.net/zbZKG/

Вот вторая, которая работает лучше, когда вы уменьшаете окноwidth: http://jsfiddle.net/zbZKG/1/

box-shadow и растение будут взаимодействовать более приятно, если вы используете цвет rgba с некоторой прозрачностью для тени, что-то неопределенно похожее на rgba(0, 0, 0, 0.6).