Есть ли обратное свойство CSS "Clip"; скрыть обрезанную область?
Синтаксис CSS-клипа позволяет вам определить прямоугольную область большего изображения, которое вы хотите видеть. Есть ли способ указать обратное? Укажите прямоугольную область изображения, которую вы хотите сделать невидимой. Как пробить прямоугольное отверстие в странице, чтобы увидеть, что внизу?
Причина (если у вас есть другие идеи): я хочу создать трехслойное изображение в шаблоне CMS. Слой 1 (внизу) является фоновым изображением. Слой 2 расположен над частью слоя 1 и представляет собой прямоугольное изображение экрана документа формата А4. Слой 3 (вверху) представляет собой прозрачный PNG (в его центре и по краям), который добавляет рамку, тень, логотип типа документа и эффект скручивания страницы в верхнем правом углу документа слоя 2.
Слои 1 и 2 будут загружены отдельно в CMS, и CSS должен объединить их вместе с изображением слоя 3 для создания эффекта. Проблема в том, что эффект скручивания страницы работает, верхний правый угол слоя 2 должен быть замаскирован, чтобы вы могли видеть весь путь от слоя 3 до слоя 1. Я надеялся, что свойство clip позволит мне указать маленький квадрат в верхнем правом углу слоя 2, который должен быть невидимым.
Альтернатива: использовать графическую программу для объединения слоев 1 и 3 и оставить прозрачную область для слоя 2. Затем при правильном расположении вы можете поместить новое объединенное изображение поверх слоя 2 для достижения того же эффекта. Тем не менее, я надеялся избежать подобной подготовки графики, потому что вы также можете создать весь образ таким образом.
1 ответ
Простой ответ: CSS клип не подойдет для этого.
Я вижу два варианта:
Попробуйте подделать "дыру", нарисовав Layer3 с Layer1 в качестве фонового изображения. Это сделает прозрачные области Layer3 заполненными Layer1. Вы можете увидеть это решение в действии здесь: http://cssfilter.saschaseewald.com/
Используйте элемент холста HMTL и его составные действия, чтобы комбинировать слои по своему усмотрению. Обзор: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/