3

我使用容器使用 Bootstrap 3 编写了一个非常基本的两列登录页面。

我想让整个页面有两个全浏览器宽度的背景，顶部是简单的纹理背景，底部是纯白色，带有扇形边缘（可能位于顶部背景底部的 repeat-x 背景div) 作为两者之间的边界。

但我想要的是让背景在特定按钮中间后面的垂直点准确过渡，这当然会根据浏览器窗口和设备而有所不同（并且布局本身是响应式的）。

这甚至可能吗？

我已经绞尽脑汁，考虑到容器 div 不是全宽的，以及该按钮上方和下方的其他一些 div，我没有想出任何合理的解决方案。

在此处输入图像描述

你会怎么做？会喜欢纯 CSS 的解决方案，但 jQuery 插件也可以。

谢谢您的帮助！

编辑：一些代码是否有助于说明内容的样子？

<div id="container">
 <div class="row logo">
  <img src="/logo.png" class="col-md-2">
 </div> 

 <div class="row">
 <img src="/images/cookie.jpg" class="col-md-6">

  <div class="col-md-5 col-md-offset-1">
    <h1 class="headline">Text here</h1> 
<button type="button" class="btn btn-lg btn-block">Button text</button> <br />
     Some other stuff here
    </div>
  </div> <!-- main row -->

   <hr> 

    <div class="row footer">
    Some text
    </div> <!--footer row -->
</div> <!-- container -->
4

1 回答 1

1

这是我从您的设计目标中理解的最接近的结果。显然，该设计仅在一定范围内有效，并且一旦满足这些最小和最大宽度限制，就需要一些设计决策（使用媒体查询）来更改布局。

http://jsfiddle.net/zyglobe/2tQGZ/5/

<div class="wrap">
  <div class="container top">
    <p>Some text ipsum dolor sit amet volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Pellentesque molestie eleifend varius. Sed facilisis justo vitae tristique condimentum. Nulla imperdiet nulla vitae augue placerat, ac vulputate nisl volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <img class="bad" src="http://placehold.it/180x200">
  </div>
  <div class="container bottom">
    <button>Button</button>
    <p>Some text at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Suspendisse ornare in velit at molestie. Nam eu ligula a sem pulvinar viverra elementum eu ligula. Aenean posuere velit purus, eget luctus eros lacinia ut. Nam fringilla nulla sit amet neque consectetur, id euismod metus mattis. </p>
  </div>
</div>

图像和按钮需要相对于顶部和底部容器之间的边界定位。其余的内容需要注意这个空间，并且永远不要与它相交。

button {position:absolute;top:0;right:0px;height:40px;padding:0 20px;margin:-20px 40px 0 0;}

img.bad {position:absolute;bottom:-100px;left:14px;z-index:500;}

.top {padding:20px 10px 30px;}

.bottom {padding:30px 10px 20px;}

为懒惰的造型道歉。但是你明白了，可以应用适当的语义。希望此参考资料有助于您应对设计挑战。

于 2013-10-11T04:24:11.787 回答