2013-04-18 7 views
14

Синтаксис клипа CSS позволяет определить прямоугольную область большего изображения, которое вы хотите видеть. Есть ли способ указать обратный? Укажите прямоугольную область изображения, которое вы хотите стать невидимым. Как пробивать прямоугольное отверстие через страницу, чтобы увидеть, что внизу?Есть ли инверсия свойства CSS «Clip»? скрыть обрезанную область?

Причина (если у вас есть другие идеи): Я хочу создать трехслойное изображение в шаблоне CMS. Уровень 1 (внизу) - фоновое изображение. Слой 2 располагается над частью слоя 1 и представляет собой прямоугольное изображение скрепки в формате A4. Слой 3 (сверху) представляет собой прозрачный PNG (по центру и по краям), который добавляет границу границы, тень, логотип типа документа и эффект скручивания страницы в верхнем правом углу документа уровня 2.

Слои 1 и 2 будут загружены отдельно в CMS, и CSS должен объединить их вместе со слоем 3 для создания эффекта. Проблема заключается в том, что эффект завивки страницы работает, верхний правый угол слоя 2 должен быть замаскирован, чтобы вы могли видеть весь путь от уровня 3 до уровня 1. Я надеялся, что свойство clip позволит мне указать небольшой квадрат в верхнем правом углу слоя 2, который должен быть невидимым.

Альтернатива: Использовать графическую программу для объединения слоев 1 и 3 вместе и оставить прозрачную область для слоя 2. Затем с правильным позиционированием вы можете разместить новое комбинированное изображение поверх слоя 2 для достижения такой же эффект. Тем не менее, я надеялся избежать подготовки графики так, потому что вы можете так же создать весь образ.

+0

Bizarre решение, которое приходит мне в голову: Нарисуйте локон эффект в Layer 3 и добавление фона (тот же фон в слой 1), чтобы скрыть угол. Немного неряшливо, но быстро ... – Arkana

+0

Спасибо за комментарии. Я столкнулся с этой ссылкой, но я беспокоюсь, что это может сильно испортиться в некоторых браузерах. Я также стараюсь избегать работы с графикой, которая увеличивает время, необходимое для замены любого из трех уровней. У меня была другая мысль. Я мог бы сделать слой 2 PNG и вручную отрезать его угол (чтобы быть прозрачным) в графической программе. Мой эффект будет работать, и заменить Layer 1 или Layer 3 на сайте будет легко. – Dominic

ответ

5

Простой ответ: Шаблон CSS для этого не работает.

Я вижу два варианта:

  1. попытаться фальсифицировать «дыру» от рисования Layer3 с Layer1 в качестве фонового изображения. Это сделает прозрачные области Layer3 заполнены Layer1. Вы можете увидеть это решение в действии здесь: http://cssfilter.saschaseewald.com/

  2. Используйте элемент холста HMTL и его составные действия, чтобы объединить слои по своему усмотрению. Обзор: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

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

  • Нет связанных вопросов^_^