如何隐藏底部Css

Posted 2023-03-06

【中文标题】如何隐藏底部Css

【英文标题】：How to hide bottom side Css

【发布时间】：2021-02-14 08:20:06

【问题描述】：

这是我尝试过的：

 &__ellipse 
        width: 297px;
        height: 297px;
        border-radius: 50%;
        background: $orange;
        position: relative;

        img 
          position: absolute;
          bottom: 0;
          right: 20px;
        
      

如何只隐藏底部？像 overflow-bottom: hide 或 clip path 这样的东西

【问题讨论】：

你试过border-radius: 100% ??

分享图片文件

@TemaniAfif ibb.co/P6zHcHP

【参考方案1】：

我会像下面这样使用蒙版和渐变：

.box 
  margin: auto;
  padding: 0 35px 32px 0; /* to rectify the image position */
  max-width: 200px;
  /* the orange circle with gradient */
  background: radial-gradient(circle closest-side, orange 85%, transparent 86%);
  -webkit-mask: 
    /* show only the orange circle (same as background  */
    radial-gradient(circle closest-side, orange 85%, transparent 86%),
    /* and also show 70% from the top */ 
    linear-gradient(#fff, #fff) top/100% 70% no-repeat; 


.box img 
  display: block;
  width: 100%;

<div class="box">
  <img src="https://i.stack.imgur.com/8Kjvd.png">
</div>

另一个使用多个背景的版本。更易于管理和响应

.box 
  display:inline-block;
  --grad:radial-gradient(circle closest-side at 50% 58%, orange 97%, transparent 98%);
  background: 
    url(https://i.stack.imgur.com/8Kjvd.png) 0 50%/contain no-repeat, var(--grad);
  -webkit-mask: var(--grad), linear-gradient(#fff, #fff) top/100% 70% no-repeat;


.box::before 
  content: "";
  display: block;
  padding-top: 100%;

<div class="box" style="width:300px"></div>
<div class="box" style="width:200px"></div>
<div class="box" style="width:100px"></div>