У меня есть background-color: (0,0,0,1) , нужно сделать несколько дырок в нем(а сзади видео) (дырки должны быть вместо слов). Как я могу это сделать?
##Так вот, получается на фоне играет видео бесконечно, мне нужно сделать так, что-бы за место тегов (span class="exception_word") были пустые окошки , типа текста нет и соответственно background-color тоже отсутствует. А моя проблема заключается в том что это НЕ РАБОТАЕТ, любыми способами пытался убрать background-color у этих span объектов и все без толку.##
body {
margin: 0;
padding: 0;
}
.div_video {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
overflow: hidden;
}
.black_blckgrnd {
height: 100%;
width: 100%;
position: absolute;
}
.main_text {
margin: 0px;
height: 100%;
width: 100%;
font-size: 60px;
color: white;
background-color: rgba(0, 0, 0, 0.432);
overflow: hidden;
}
.exception_word {
opacity: 0;
background: transparent;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>task_2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="div_video">
<video autoplay loop>
<source src="videos/video_1.mp4" type="video/mp4">
Ваш браузер не поддерживает video.
</video>
</div>
<!--Text-->
<div class="black_blckgrnd">
<p class="main_text">
Lorem ipsum,
<span class="exception_word">dolor</span> sit amet consectetur adipisicing elit. Natus non
<span class="exception_word">explicabo</span> laborum cum, sed possimus animi corrupti error
<span class="exception_word">tempore</span>
quae
</p>
</div>
<script src="main.js"></script>
</body>
</html>
