拉伸背景图像和颜色，以全宽度的骷髅CSS框架

我希望创建的背景舒展充满与骨架CSS网格浏览器（图片或颜色）？ http://getskeleton.com - 如果您下载Skeleton，您将会看到Container是一个12列流体网格，最大宽度为960px。所以如果你想创建一个头div，并为其分配一个类来改变该背景图像，它将保持在960容器内。它不会完整浏览器的宽度。拿出集装箱外的标题超出960 &你会打破网格。我希望内容保持在960格内，但背景延伸到浏览器边缘 - 任何想法？拉伸背景图像和颜色，以全宽度的骷髅CSS框架

来源

2017-02-10 user2939544

使用css background-cover。 –

有几种方法可以做到这一点，不知道你的限制，我会建议：容器类，您可以相应风格之外创建一个额外的元素。而不是使用一个整版的容器，你可以使用一个容器的网站，header>container | section>container | footer>container等各节...

CSS 
     .header { 
     width: 100vw; 
     height: 25vh; 
     background-color: blue; }

HTML 
     <div class="header"> 
     <div class="container"> 
      <div class="row"> 
      <div class="twelve columns"></div> 
      </div> 
     </div> 
     </div>

这是Skeleton Demo使用的方法。看看Skeleton Demo source code，看看这个方法是如何实现的。

来源

2017-02-10 21:26:32

使用绝对定位的元素，你可以有点卡住背景为另一种元素。由于主容器有position: relative，因此您必须使用left: 50%;和transform来居中。 top: 0将使其忽略父项的填充，但如果不希望将背景扩展到填充中，则必须将其添加到元素以匹配其父容器。由于vw单位是相对于视口，因此width: 100vw将使其全宽。

position: absolute; 
width: 100vw; 
left: 50%; 
top: 0; 
transform: translateX(-50%); 
background: red; 
height: 100%;

来源

2017-02-10 18:49:15 Alejalapeno

拉伸背景图像和颜色，以全宽度的骷髅CSS框架

回答

相关问题