title: how to make child div to "do not inherit background color" from its father div?
body: <p>I want make different background between father elem and child elem.</p>
  
  <p>fiddle : <a href="http://jsfiddle.net/cbcL6osm/" rel="nofollow">http://jsfiddle.net/cbcL6osm/</a></p>
  
  <p>I mean, if you see the child div, its background color is red inherited from father div.</p>
  
  <p>That's not I want. </p>
  
  <p>I want make child div to only shows its background image, and do not inherit background color from its father div.</p>
  
  <p>Below is the code of fiddle : <a href="http://jsfiddle.net/cbcL6osm/" rel="nofollow">http://jsfiddle.net/cbcL6osm/</a></p>
  
  <pre><code>html :
  &lt;div class="father"&gt;
      test
      &lt;div class="child"&gt;
          test
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  css :
  .father {
      width: 100px;
      height: 100px;
      background-color:red;
      position:relative;
  }
  
  .child {
      position:absolute;
      top:20px;
      left:20px;
      width: 60px;
      height: 60px;
      background:url('https://www.google.co.kr/logos/doodles/2014/leo-tolstoys-186th-birthday-5756677508825088.2-res.png') center;
      background-size:30px 30px;
      background-repeat:no-repeat;
      border:thin solid;
  }
  </code></pre>