How can make blackout on my images like when screen blackout due to cookie warning?

Question

I want to do basic augmentation on my train datasets. I'll write the code but I need to help. How can I make blackout like this, can you send an example code (just for blackout) or anything?

As you see on below image, there is blackout on logo that is inside the red rectangle. Example image:

score 2 · Answer 1 · answered Sep 01 '22 at 11:25

You can do this make a black container that fills the hole screen and change it's opacity like this (or use rgba alpha for opacity).

body {
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  width: 100vw;
  /* you can use opcity or rgba like below*/
  background-color: rgba(0, 0, 0, 0.8);
  /*or*/
  /*
  background-color: #000000;
  opacity: 0.8;
  */
  display: flex;
  justify-content: center;
  align-items: center;
}

.pop-up {
  height: 200px;
  width: 300px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: larger;
}

<div class="container">
  <div class="pop-up">A salam alaykoum.</div>
<div>

How can make blackout on my images like when screen blackout due to cookie warning?

1 Answers1