Make parent div transparent, but only where the child is

I have a webpage with a background-image (in my example just red) and a row which should have a background-color (in my example blue) and a with of 100%.

The problem is that inside the blue bar there should be a transparent logo (fixed width 200px), but it should be transparent to let through the background-image of the body (in my example red).

Example:

body {
  background-color: red;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.row {
  width: 100%;
  height: 40px;
  background-color: blue;
}

.logo {
  width: 200px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 auto;
}

<div class="row">
  <div class="logo">
    Should be transparent to the red background
  </div>
</div>

https://jsfiddle.net/uamgevLo/2/

Any suggestions how this might be done?