双背景

Question

我正在尝试实现类似黄黑背景图片中高亮部分的显示。三个方框分别显示一半黄色一半黑色背景

谁能帮我处理 CSS BOOTSTRAP.

提前致谢。

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

Answer 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>

Answer 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;

}

Answer 3

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

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

双背景

Double background

html

css

background

psd

twitter-bootstrap