Foundation 中具有垂直和水平居中文本的全宽和全高背景图像答案

【问题标题】：Full width & height background image with vertically & horizontally centred text in FoundationFoundation 中具有垂直和水平居中文本的全宽和全高背景图像
【发布时间】：2014-04-16 20:20:54
【问题描述】：

我已向我正在处理的网站添加了一个全宽和全高背景图像，其中包含垂直和水平居中的文本。我已经在某种程度上实现了这一点，但是我的文本被限制在一定的宽度上时遇到了麻烦，我不知道为什么。最终，我想在我的解决方案中包含 Foundations 行和 large-12 列，并使文本跨越列的宽度，而不是压缩到目前的 683px。对此的任何建议和指导将不胜感激。

HTML：

<div class="fullscreen-cont">
  <div class="fullscreen-img"></div>
  <div class="content xy-center">
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h2>
  </div>
</div>

SCSS：

.fullscreen-cont,
.fullscreen-img {
  display: block;
  position: relative;
  min-width: 100vw;
  min-height: 100vh;
}

.fullscreen-img {
  display: block;
  z-index: 1;
  min-width: 100vw;
  min-height: 100vh;
  // background position when .fullscreen-img overflows
  background:transparent url('http://24.media.tumblr.com/2cfbc3f3c40e18949afd5d5dadfa4664/tumblr_n381f5z8es1st5lhmo1_1280.jpg') center center no-repeat;
  background-size: cover;
}

.content {
  display: block;
  position: relative;
  z-index: 2;
  h2 {
    color: #fff;
    text-align: center;
  }
}

// Vertically and horizontally center text within a div
.xy-center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

目前：http://imgur.com/BCIAGZE

如果可能的话，我希望如何使用带有背景图像的行和大 12 列来增加文本宽度：http://imgur.com/b27uT7m

【问题讨论】：

标签： html css sass zurb-foundation

【解决方案1】：

将背景图片添加为

background: url(../images/your_image.jpg) fixed no-repeat center center;
background: url(../images/your_image.jpg) no-repeat center center; /* if you don't want it fixed */

文本使用

width:100px;
height:100px;
position: absolute;
text-align: center;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;

【讨论】：

【解决方案2】：

所以我自己解决了这个问题。如果您有任何建议或发现我的解决方案中有任何缺陷，请随时指出。此外，该解决方案使用仅与现代浏览器兼容的视口单元。

HTML：

  <div class="hero-text">
      <div class="row">
        <div class="large-12 columns xy-center">
          <h1>Hi</h1>
          <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h2>
        </div>
      </div>
    </div>

CSS：

// Vertically and horizontally center text within a div
.xy-center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.hero-text {
  width: 100%;
  height: 100%;
  background: url('http://25.media.tumblr.com/1adc4029ef3a31124f222add70fa3553/tumblr_n2k1499dIp1st5lhmo1_1280.jpg') center center no-repeat;
  background-size: cover;
  h1 {
    color: #fff;
    text-align: center;
    text-transform: uppercase;
  }
    h2 {
    color: #fff;
        text-align: center;
        text-transform: uppercase;
    }
}

【讨论】：