как разместить два прозрачных изображения, чтобы перекрыть противоположные углы контейнера div - PullRequest
0 голосов
/ 24 октября 2011

Я получил этот PSD-комп от печатного графического дизайнера, и я не уверен, что это можно сделать в Интернете.
Обратите внимание, что контейнер с закругленными углами в черной рамке (на рисунке ниже) уже существует. На этой странице есть несколько z-индексированных элементов, поэтому сложно определить, какой из них имеет приоритет в порядке наложения.

enter image description here

Как видите, у меня есть две серые ленты сверху (представляющие коробку с лентой и орнаментом), расположенные в верхнем левом и нижнем правом углах, вместе с двумя изображениями (меньшие синие прямоугольники, т.е. : / Из :) под этими "лентами", но на верхней части контейнера. Цвет фона для контейнера - белый. Верхний левый угол должен иметь прозрачный фон, чтобы пометить поменьше синее поле. Может кто-нибудь сказать мне, как расположить эти «скошенные ленты» на этом округлом углу контейнера? Или, если это можно сделать с помощью CSS и HTML.

1 Ответ

0 голосов
/ 24 октября 2011

Самый простой ответ - иметь два <img>, и они оба абсолютно позиционированы.Положение один с top:0px; left:0px;и один с bottom:0px; and right:0px ;.Дайте им высокий z-индекс, чтобы убедиться, что они находятся на вершине div.Убедитесь, что родительский div имеет position: relative определение.

...