Question

我一直试图确定如何做一个像负余量这样的背景。这是我现在所做的事情的图片

下面的图片显示了我想要的结果

我试图使用负边距但没有运气。这是我现在的代码

HTML

  <div class="container">
                  <div class="navbar navbar-custom radius-fixer nomargin" role="navigation">
                              <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                  <span class="sr-only">Toggle navigation</span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                </button>
                              </div>
                              <div class="navbar-collapse collapse nopaddingright">
                                <ul class="nav navbar-nav">      
                                  <li class="active"><a href="<?php echo home_url(); ?>">HOME</a></li>        
                                  <li><a href="about-us">ABOUT US</a></li>
                                  <li><a href="faq">FAQ</a></li>
                                  <li><a href="contact-us">CONTACT US</a></li>
                                  <li><a href="online-forms">ONLINE FORMS</a></li>
                                  <li><a href="virtual-clinic-tour">VIRTUAL CLINIC TOUR</a></li>    
                                  <li><a href="blog" class="noborder">BLOG</a></li>              
                                </ul>                       
                              </div><!--/.nav-collapse -->
                          </div><!--/.container-fluid --> 
</div>

<div class="clearfix" id="main">
  <div class="container">
    <div class="flexslider nomargin">
                      <ul class="slides">
                        <li>
                            <img src="SLIDER1"  />
                          </li>
                          <li>
                            <img src="SLIDER2"  />
                          </li>
                          <li>
                            <img src="SLIDER3"  />
                          </li>
                      </ul>      
    </div>
  </div>
</div>

FOR MY CSS

  #main{
  background: #bf35bc;
  background-position: top;

}

非常感谢答复。

Answer 1

您应该能够通过对main元素应用负上边距来实现您想要的效果：

margin-top: -40px;

这会拉扯div。见http://jsfiddle.net/raad/f6r1Lvf9/embedded/result/

修改

我已经从问题中分出了Bootply示例，并添加了一个负的上边距：http://www.bootply.com/5n8DsKXPQG 它似乎做了所需要的。

Answer 2

这是负的上边距：margin-top: -50px;

所以试试

#main{
   background: #bf35bc;
   background-position: top;
   margin-top: -50px;
}

HTML背景定位

2 个答案: