背景画像は背景色より上にある必要があります

Question

背景png画像を持つdivを追加したいと思います。その背景画像は、2つの列の上に表示する必要があります。divsはcoralとsteelblueの背景色をdiv.soに教えてくださいCSSの変更。 このバイオリンは、ブートストラップなしである： はここに画像 the glass image should b above the two divs but rmain behind the circles and text

<section> 
    <div class="bg-hands row"> <!--row div start--> 
     <div class="left col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
      <div class="col-lg-6 pull-right"> 
       <img src="/images/img_avatar2.png" class="img-circle img-responsive" style=""> 
      </div> 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
       <h2>lorem ipsem</h2> 
       <h4>doller sit amet</h4> 
       <hr> 
       <p id="p-left">Vivamus suscipit tortor eget felis.</p> 
      </div> 
     </div> 
     <div class="right col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
      <div class="col-lg-6 pull-left"> 
       <img src="/images/img_avatar2.png" class="img-circle img-responsive" style=""> 
      </div> 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
       <h2>lorem ipsem</h2> 
       <h4>doller sit amet</h4> 
       <hr> 
       <p id="p-right">Vivamus suscipit tortor eget felis.</p> 
      </div> 
     </div> 
    </div> 
</section> 

<!--below css--> 
.left { 
    background-color: coral; 
    color: white; 
} 
.right { 
    color: white; 
    background: steelblue 
} 
.pull-right { 
    padding: 20px; 
} 
.pull-left { 
    padding: 20px; 
} 
.img-circle { 
    box-shadow: 0px 0px 0px 6px rgba(255,255,255,0.3); 
} 
.bg-hands { 
    background: url("/images/opacityimg.png"); 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
.text-center { 
    padding: 80px; 
} 

Answer 1

この解決策を確認してくださいです。

.left 
 
    { 
 
     background-color: coral; 
 
     color: white; 
 
    } 
 
    .right 
 
    { 
 
     color: white; 
 
     background: steelblue 
 
    } 
 
    .pull-right 
 
    { 
 
     padding: 20px; 
 
    } 
 
    .pull-left 
 
    { 
 
    padding: 20px; 
 
    } 
 
    .img-circle-coral 
 
    { 
 
    box-shadow: 0px 0px 0px 6px rgba(255,255,255,0.3); 
 
     
 
    } 
 
    .img-circle-blue 
 
    { 
 
    box-shadow: 0px 0px 0px 6px rgba(255,255,255,0.3); 
 
    background-color: steelblue; 
 
    } 
 
.bg-hands 
 
{ 
 
    //background: url("http://xiostorage.com/wp-content/uploads/2015/10/test.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 
.text-center 
 
{ 
 
    padding: 80px; 
 
} 
 
    
 
.coral { 
 
    background-color: coral; 
 
} 
 
    
 
.steelblue { 
 
    background-color: steelblue; 
 
} 
 

<section> 
 
      <div class="bg-hands row"><!--row div start--> 
 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
       <div class="col-lg-6 pull-right"> 
 
       <img src="http://xiostorage.com/wp-content/uploads/2015/10/test.png" class="img-circle coral img-responsive" style=""> 
 
       </div> 
 
      <div class="left col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 100%"> 
 
       <h2>lorem ipsem</h2> 
 
       <h4>doller sit amet</h4> 
 
       <hr> 
 
       <p id="p-left">Vivamus suscipit tortor eget felis.</p> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 

 
     <div class="col-lg-6 pull-left"> 
 
       <img src="http://xiostorage.com/wp-content/uploads/2015/10/test.png" class="img-circle steelblue img-responsive" style=""> 
 

 
      </div> 
 
      <div class="right col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 100%"> 
 
       <h2>lorem ipsem</h2> 
 
       <h4>doller sit amet</h4> 
 
       <hr> 
 
       <p id="p-right">Vivamus suscipit tortor eget felis.</p>  
 
      </div> 
 
      </div> 
 
      </div> 
 
     </section>

OK？

Answer 2

まず、より良い説明が必要です。スクリプトを投稿しただけです。画像は、不透明度を持っており、あなたがその背後にある別の色を持つようにしたい場合は、あなただけのCSSでこのような何かを追加することができます

：

background: #fff url("/images/opacityimg.png");