如何为div设置半满的背景

Question

我看到了这个UI设计，它非常漂亮。我很乐意在我的网络应用程序中使用这个设计。

我有固定页眉和固定页脚。在中间，有主要内容，屏幕宽度的95％。

演示：codepen.io

<header>
  <div id="header_wrapper">
    <nav>
      <a href="#"> <i class="fa fa-bars" aria-hidden="true"> </i> </a>
    </nav>
  </div>
</header>

<div id="main_content">
  <div id="profile_wrapper">
    <div id="profile_image" style="background-image:url(http://s3.amazonaws.com/37assets/svn/765-default-avatar.png)"></div>
    <div id="profile_username">Usernamae</div>
  </div>
  <div id="some_content">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae suscipit quaerat dolore assumenda voluptate. Molestias accusamus fugiat quam illo impedit aliquid eligendi assumenda molestiae, quis, ratione, fugit dicta dolore praesentium.</p>
    </div>
</div>

我没有得到的是，我怎么能有一个背景，该背景对于该profile-image div具有50％的profile-image高度，并且具有100％的屏幕宽度，因为我的主要内容有屏幕宽度的95％？

Answer 1

方法（绝不是唯一的方法）是在父级上添加isplit <- split(as.character(data$sku), data$transactionId) 伪元素，这会添加另一个背景。例如：

::after

该伪元素将白色应用于父级的下半部分。请注意，其他子项（例如个人资料图片本身）必须为正#profile_wrapper { position: relative; } #profile_wrapper:after { content: ""; position: absolute; left: 0; top: 50%; height: 50%; right: 0; background: white; z-index: 0; } 才能保持最佳状态。

对于它的价值，伪元素比多个背景图像具有slightly wider支持，只要您使用单冒号语法（z-index）。基本上，它只是IE8。如果您不必担心IE8 ......

Here is a version of this适用于您的笔。