双背景答案 - 爱码网

【问题标题】：Double background双背景
【发布时间】：2015-08-25 04:08:53
【问题描述】：

我正在尝试为黄色和黑色背景的图片中突出显示的部分实现类似的显示。三个方框显示一半为黄色，一半为黑色。

谁能帮我在 CSS BOOTSTRAP 中处理它。

提前致谢。

http://i.stack.imgur.com/yPj0w.png

【问题讨论】：

只需定义不同的 div 并赋予它们不同的背景颜色（使用 background-color 语法），如果您希望将元素叠加在两个 div 中，请将其设置为 position:absolute ;

标签： html css twitter-bootstrap background psd

【解决方案1】：

这 3 个框被简单地绝对定位在背景图像上。看这个-

#bgbox {
    background-color: black;
    border-left: 50px solid yellow;
    width:50px;
    height:100px;
}
#top {
    position:absolute;
    top:40px;
    left:40px;
    width:30px;
    height:30px;
    background-color:blue;
    
}

<div id="bgbox">
</div>
<div id="top">
</div>

【讨论】：

【解决方案2】：

使用位置来执行此操作。Demo

<div class="top">
    <div class="inner"></div>
</div>
<div class="buttom">

</div>

.top{
    position:relative;
    width:100%;
    height:300px;
    background-color:yellow;
}
.inner{
position:absolute;
    width:300px;
    height:300px;
    top:50px;
    left:100px;
    background-color:red;
    z-index:3;

}
.buttom
{
position:relative;

    width:100%;
    height:300px;
    background-color:black;

}

【讨论】：

【解决方案3】：

使用 Bootstrap 类并按边距顶部值排列框。看下面的代码。全屏运行

  .yellowbg { background-color: #beb333; height: 300px; }
        .blackbg { background-color: #000; height: 300px; }
        .yellowboxes { height: 182px; margin-top: -118px; background-color: #e3cf00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="yellowbg">
                </div>
                <div class="blackbg">
                    <div class="row">
                        <div class="col-lg-2 col-lg-offset-3 col-md-2 col-md-offset-3 col-sm-offset-3 col-sm-2">
                            <div class="yellowboxes">
                            Box 1
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-2">
                            <div class="yellowboxes">
                            Box 2
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-2">
                            <div class="yellowboxes">
                            Box 3
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

【讨论】：