在图像上放置CSS

Question

我在HTML和CSS上有一个问题，我不能把我的缺口放在我在FiveM中用作shell的图像上。我也试过把它放在一个类，它没有工作，试过把img src也没有工作任何想法?

.notch {
position: absolute;
width: 144px;
height: 27px;
top: 0px;
bottom: 30px;
left: 73px;
z-index: 4;
background: black;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
}
.camera {
width: 6px;
height: 6px;
top: 9px;
border-radius: 100%;
position: absolute;
left: 119px;
background: #0d4d71;
}
.speaker {
height: 6px;
width: 60px;
left: 50%;
position: absolute;
top: 9px;
margin-left: -30px;
background: #171818;
border-radius: 6px;
}

<div class="container disableSelection">
<img src="https://via.placeholder.com/300" class="phone-frame">

<div class="phone-container phone-background">
<div id="notch" class="notch">
<div class="camera"></div>
<div class="speaker"></div>
</div>

https://i.stack.imgur.com/VrvCV.png截图

Answer 1

鉴于我不知道完整的代码，我怀疑你不能，因为当你使用

.notch {
position: absolute;
..
}

这使得。notch相对于它的父元素，但是它的父元素不是图像，而是。phone-container，它是给定图像的兄弟元素。