title: Transparent background of <div> CSS
body: <p>For those who can't wait <a href="http://jsfiddle.net/johnsemblante/ouy9thkk/" rel="noreferrer">Fiddle</a></p>
  
  <p>I have this problem in CSS. The structure of the <code>html</code> and <code>css</code> code looks like this</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="one"&gt;
      &lt;div class="two"&gt;
          &lt;div class="three"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.one{
      width: 500px;
      height: 500px;
      background: url('http://www.moonlightcompanies.com/wp-content/uploads/2013/01/6973_MOONF-PomegranatesOnTree-8536-1.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      padding: 20px;
  }
  
  .two{
      width: 300px;
      height: 300px;
      background: blue;
      padding: 20px;
  }
  
  .three{
      width: 200px;
      height: 200px;
      background: transparent;
      padding: 20px;
      border: 5px solid yellow;
  }
  </code></pre>
  
  <p>My problem is how do I make the background of <code>&lt;div class="three"&gt;&lt;/div&gt;</code> that it would be transparent and would blend to the background of the <code>&lt;div class="one"&gt;&lt;/div&gt;</code>. I want my desired output to be like the attached image. Is this possible ?</p>
  
  <p><img src="https://i.stack.imgur.com/Pc79V.png" alt="enter image description here"></p>