html - background image just be seen in child div

Question

i have a parent div with background image and another div inside it. i want background image of parent div only be seen in child div (like an open window).

.parent {
    width:800px;
     height:600px;
     background-image: url("https://via.placeholder.com/150");
}
 .child{
     width:50%;
     margin:auto;
}

<div class="parent">
   <div class="child"></div>
</div>

Answer 1

From what I understand, you want an image in backgound and you want to display it inside a child div.

To implement this, you can use WebKit's image masking.

.demo {
  width: 200px;
  height: 250px;
}

.demo {
  position: relative;
  float: left;
  margin-right: 30px;
}

.demo:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg)
    no-repeat;
  opacity: 0.1;
  transition: 0.7s;
}

.demo .has-mask {
  position: absolute;
  clip: rect(10px, 190px, 190px, 10px);
}

.demo:hover:before {
  opacity: 0.4;
}

<div class="demo">
    <img src="https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" alt="" class="has-mask">
</div>