Как вычесть div из родителя?

Question

[zuraavl]

Структура такая:

body
  .parent
    .child-list
      .child-box
        .child

body например синего цвета, а parent - белого с position: fixed и шириной, и высотой по 100%
(остальные блоки для выравнивания по горизонтали и соблюдения ряда)

Итак вопрос:
Можно ли сделать наш .child прозрачными, чтобы сквозь него проглядывался наш синий body. Как его вычесть или что с ним сделать?
Или тут только png поможет?
Спасибо

Answer 1

[Евгений Петров]

Если фон однородный, в некоторых ситуациях может помочь box-shadow.
Пример: тык, пык

Comments

[Евгений Петров]

Не замерял быстродействие с единственной большой тенью, но думаю, что гораздо важнее количество теней и, самое главное, анимация элементов с тенью.
И мне кажется, что fixed для фона для производительности не менее напряжённо. Более того, видел проблемы для обсчёта такого расположения в IE, а в webkit есть и проблема с контекстами.

[zuraavl]

box-shadow большого размера пришлось применить для двух элементов. В итоге хром и правда тормозит, а ie и moz нет. Спасибо

[Евгений Петров]

SelenIT2: Ну вот навскидку тема с проблемой в webkit у фиксированного фона Почему хром не дружит с video, audio, iframe, object?
Что касается проблемы из статьи, я читал её, но воспроизвести не смог.

И потом, как я понял, есть желание просвечивать любой контент, а не исключительно фон, который будет зафиксировано относительно viewport.

[Евгений Петров]

zuraavl: Нас с SelenIT2 интересует — а непрозрачная тень также тормозит в Chrome? Есть различие с частично непрозрачной?

[zuraavl]

с полупрозрачной fps падает на 5-7 пунктов, с непрозрачной оно больше.

[Евгений Петров]

zuraavl: Оно — это падение? Я правильно понял, что полностью перекрывающая тень тормозит сильнее, чем частично непрозрачная?

[zuraavl]

Вообще не понятно. Смотри - вот счетчик для полностью перекрывающей тени: screenshot.ru/56ba7d504b68545d1e3dcd2ad443b99f.gif
А вот для частично непрозрачной:
screenshot.ru/04b83fb6f5483ef59a36a1cac354b79c.gif

[zuraavl]

Ну, с outline fps ниже 40 не опускается, но ему нельзя придать скругление.

Answer 2

[kidar2]

Прозрачным не будет, но цвет будет один.
body, .child
{
background-color: blue;
}

Comments

[zuraavl]

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