Скрыть изображение за div [z-index]

Я хочу скрыть два изображения (частично) позади моего центра/главного div, так же, как показано на картинке, в которую я включил [изображения синие, а центр div - коричневый, темнее синий цвет - это часть изображения, которое должно быть скрыто за div]. Два изображения включены в HTML (как теги). Они должны быть (как они в настоящее время) частью HTML а не «вводится» через CSS. Позиционирование изображений не является проблемой, но «перекрытие/скрытие» is.I пробовал столько раз с помощью z-индекса, но безрезультатно.Скрыть изображение за div [z-index]

Может ли кто-нибудь помочь?

ссылка на изображение. http://i.stack.imgur.com/ZCKdt.jpg

источник

2014-01-18 Aca85

Что собственно проблема? Разве z-индекс не меняет порядок элементов? Если это так, вам нужно добавить атрибут position в css, например: 'position: relative;'. – Omega

Без просмотра HTML/CSS будет сложнее диагностировать проблему, но похоже, что вы путаете элементы тела с позиционируемыми элементами. Z-index не будет работать для элементов тела, поэтому вы должны попытаться поместить синие изображения в div и потянуть этот div за ваш коричневый div.

Вы можете найти более подробную информацию и jsfiddle пример в этом старше пост: Hiding a image under the div

источник

2014-01-18 21:56:13

Спасибо, я попробовал именно это, и это сработало :) – Aca85

Если вы хотите, чтобы частично скрыть их за основной DIV, вы можете установить родительский контейнер (ваше тело тега, если ничего больше не содержит главный div) и добавьте свои изображения в css, используя background-image: url(image1.png), url(image2.png);, а затем background-position: left center, right center;. Вы также можете использовать пиксели или процент, чтобы определить положение горизонтальной и вертикальной, соответственно. Таким образом, вам не нужно беспокоиться о z-index.

Однако ни этот, ни z-index не помогут решить вашу другую проблему с тем, чтобы изображения были частично видимыми. Для этого вы можете установить цвет и непрозрачность фона вашего основного div background: rgba(0, 0, 0, 0);, где первые три нуля могут быть любым числом от 0 до 255, которое представляет собой красный, зеленый и синий, а четвертый нуль представляет любое число от 0 до 1 (в виде десятичных знаков), который определяет непрозрачность. Чем меньше число, тем прозрачнее фон. Чем прозрачнее это, тем больше вы можете видеть образы за ним.

В качестве альтернативы, вы можете использовать opacity: 0; таким же образом, как описано выше

источник

2014-01-19 01:22:43 Hiigaran

Скрыть изображение за div [z-index]

ответ

Смежные вопросы