html - 带有 flexbox 的字体图标作为页面背景

Question

我正在尝试使用字体图标作为背景图像，并使用 flexbox 将其水平和垂直居中。我已将其设置为正文。

我希望所有其他内容位于字体图标上方，并且我使用相同的 flex 属性使内容居中。

我在 codepen 上创建了一支笔.

-------html----------------

<div class="module-card">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem possimus ipsam commodi consequuntur quo dolor ad cupiditate blanditiis perferendis maiores incidunt dolores similique officiis a provident, obcaecati temporibus! Culpa, reprehenderit.</p>
</div>

-----css-------------

body{
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
  z-index:-1;
}

body:before {
    content: "\f113";
    font-family: FontAwesome;
/*--adjust as necessary--*/
    color: blue;
    font-size: 30em;
  text-shadow: 2px 2px #ff0000;

}

.module-card {
  width:50%;
  background: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background:  rgba(0,191,255,0.2);
  z-index:9999;
}

有没有可能用这个代替背景图片？

谢谢，苏海尔。

Answer 1

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height:100vh;
  z-index:-1;
  position: relative;
}

body::after {
  content: "\f113";
  font-family: FontAwesome;
  color: blue;
  font-size: 30em;
  text-shadow: 2px 2px #ff0000;
} 

.module-card {
  width:50%;
  background: #fff;
  padding: 10px;
  display: flex;
  /* flex-direction: column; */
  background:  rgba(0,191,255,0.2);
  z-index:9999;

  /* center and overlay content */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

演示:http://codepen.io/anon/pen/zvjLyV