Обрезка центра изображения в CSS

Я пытаюсь поставить полупрозрачный оверлей перед полноэкранным видео и в качестве цели для фотографирования.

Часть, которую я пытаюсь вырезать, показана на этом изображении белым цветом: https://ibb.co/cK6xb8

clip-path может обрезать внешнюю часть изображения, но как вы можете обрезать внутреннюю часть?

Может это поможет. jordanhollinger.com/2014/01/29/…

— 25.07.2018 21:13

?? вы хотите, чтобы изображение отображалось только на белой части или только снаружи? иначе режим смешивания может быть альтернативой внутри или снаружи работ, вам нужна демонстрация маски с использованием текста для маски codepen.io/gc-nomade/pen/rWrvKP (это касается используемых цветов)

— 25.07.2018 21:39

css mask clip-path

25.07.2018 21:10

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сделать это с полигонами в clip-path. Ознакомьтесь с Clippy и выберите вариант кадра для примера.

-webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);