如何删除元素的一部分?

kptlronyttcna

这是我的方法:

<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/

前卫的

您可以对元素使用包装纸,并为其设置较小的高度,然后添加 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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档