Как сделать прозрачный круг в div?

04.05.2023, 21:59. Показов 1399. Ответов 0

Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам

Я пытаюсь сделать код, когда есть div, в нем установить слой с видео, и обрезать часть.
То есть я пытаюсь добится, чтобы свозь див была видно видео круглой формы.
Однако ничего не получается.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.hole {
  width: 1280px;
  height: 400px;
  overflow: hidden;
  position: relative;
 
}
 
.hole::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
box-shadow:   0 0 0 1000px rgba(255,255,255,1);
}

HTML5
1
2
3
4
<div style="position:absolute;left:110px;top:310px; background:transparent;" > 
  <video   class="hole"  loop="" muted="" autoplay="" width="auto" height="auto"   >
    <source src=" 4.mp4" type="video/mp4">
  </video></div>

Прозрачный круг получается, и сквозь него видео видно. Однако и весь прямоугльник с видео не исчезает. Он остается однотонным прямоугольником.
То есть в итоге я получаю круглую дырку сквозь которую видно видео, да. Однако остальной прямоугольник не образется. Оставаясь залитым однотонным цветом.

Добавлено через 50 минут
Уже разобрался, отбой вопроса. нужно использовать css mask (c картинкой png)

cpp_developer

Эксперт

20123 / 5690 / 1417

Регистрация: 09.04.2010

Сообщений: 22,546

Блог

04.05.2023, 21:59

Ответы с готовыми решениями:

Наложить прозрачный круг на jpg
Доброго дня, подскажите, пожалуйста,что не так? Хочу на картинке 925.jpg нарисовать прозрачный круг с заливкой... А он рисуется не...

Как сделать чтобы фон у div залезал на другой div
При больших разрешениях 1920px на сайте http://gazetakuponov.ru фон разных блоков урезается, тоесть не дает перейти картинки фона на другой...

Hp 81F9 Застрял указатель в одной точке экрана, вокруг него прозрачный круг
Застрял указатель в одной точке экрана, вокруг него прозрачный круг. Пытаешься двигать точпадом - дёргается на пару сантиметров и...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

raxper

Эксперт

30234 / 6612 / 1498

Регистрация: 28.12.2010

Сообщений: 21,154

Блог

04.05.2023, 21:59

Помогаю со студенческими работами здесь

Как сделать div с видео на div с изображением
Добрый день! Я почти не понимаю в div'ах, поэтому если есть возможность, объясните пожалуйста где у меня ошибка. Требуется наложить...

Прозрачный фон юлока DIV
Нужно сделать чтобы фон блока DIV был прозрачным, но при этом чтобы буквы не были прозрачными. Подскажите как реализовать?:scratch:

Как сделать прозрачный TreeView?
Уже 2 часа штурмую гугл и без результатно, мб кто сталкивался?

Как сделать прозрачный Button?
как сделать прозрачный Button. В большинстве программе Buttonы прозрачные. Какая свойства Буттона делает его прозрачный

Как сделать прозрачный panel?
Нужно чтобы панель была полупрозрачна. Как это реализовать?

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .

Наверх