如何删除元素的一部分？

Question

以下是我的表现方式：

<style>
  #myElement {
      width: 120px;
      height: 120px;
      background-image: -webkit-linear-gradient(red, blue);
      border-radius: 50%;
  }

  #myElement::after {
      content: 'Some Text';
      text-align: center;
      display: block;
      width: 100%;
      height: 50%;
      background-color: white; /*the same color as the background*/
      position: relative;
      top: 100px;
  }
</style>
<div id="myElement"></div>

http://jsfiddle.net/uw59ye26/

但如果有背景图片怎么办？

<style>
  html {
      background-image: linear-gradient(rgb(40, 255, 68), rgb(186, 255, 157));
  }
</style>

http://jsfiddle.net/yqva1are/

Answer 1

您可以对元素使用包装并将其设置为较小的高度并添加overflow: hidden

body {
    background-image: linear-gradient(rgb(40, 255, 68), rgb(186, 255, 157));
}
.test {
    height: 100px; overflow: hidden;
}
#myElement {
    width: 120px;
    height: 120px;
    background-image: linear-gradient(red, blue);
    border-radius: 50%;
}

<div class="test"><div id="myElement"></div></div>