Question

我想添加带有背景png图像的div，并且背景图像应该是顶部的两列div，珊瑚和钢蓝色背景颜色在行div中。请告诉我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

请检查此解决方案：这个小提琴没有Bootstrap。

＆＃13;

$('#onoff').addClass('fadeOut');

＆＃13;

  .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;
 }

＆＃13;

OK？

Answer 2

首先，您需要更好的解释。您只发布了一个脚本。

如果图像具有不透明度并且您希望其后面有不同的颜色，那么您可以在CSS中添加这样的内容：

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

背景图像应高于背景颜色

2 个答案: