Question

我试图显示半个图像，顶部是特定的。

尝试这样做时，我遇到了一些问题。

当试图剪辑图像时，它会消失吗？我使用Bulma CSSframework但似乎不让我显示一半的图像？它在Bulma之外工作正常。

我在其他问题上尝试过答案，只会导致图像消失。

<article class="media">
    <figure class="media-left">
        <p class="image"><img style="margin-top:-20px;position:absolute;clip:rect(0,73px,63px,0);" src="https://habboon.pw/habbo-imaging/avatarimage/figure?figure={{ auth::user()->look }}&gesture=sml&size=m"></p>
    </figure>
    <div class="media-content">
        <div class="content">
        </div>
    </div>
</article>

Answer 1

剪辑CSS属性定义元素的哪个部分可见。 clip属性仅将应用于绝对定位的元素 是位置的元素：绝对或位置：固定。

请注意，根据MDN

，此功能已弃用

此功能已从Web标准中删除。一些浏览器可能仍然支持它，它正在被删除。避免使用它并尽可能更新现有代码;看到了本页底部的兼容性表格可指导您做出决定。请注意，此功能可能随时停止工作。

相反，您可以使用clip-path

clip-path CSS属性创建一个剪切区域，用于定义元素的哪个部分应显示。更具体地说，显示了区域内部的那些部分，而隐藏了那些部分。

// clip-path: polygon(point1 [x,y], point2[x,y], point3[x,y],....pointN[x,y]);
// this creates a rect with full width and only half height
clip-path:  polygon(0 0, 100% 0, 100% 50%,0 50%);

请注意，此方法会“剪切”图像的下半部分，还有另一种方法可以让您保留完整图像并在适合您情况的情况下在下半部分放置覆盖

<强>更新

clip（以及更新的剪辑路径）仅定义剪切路径，它不会更改被剪裁元素的宽度/高度。

虽然您可以通过以下某种解决方法来实现目标

.wrapper{
    width: 300px;
    
    /*Set the height = 1/2 of your image height*/
    height: 150px;
    
    /*clip-path is not needed now*/
    /*clip-path:  polygon(0 0, 100% 0, 100% 50%,0 50%);*/
    
    /*Instead you can use background-image with size set to cover*/
    background-image: url("https://placehold.it/300/100");
    background-size: cover;


  

}

<div class="wrapper">
</div>

显示图像的一部分？

1 个答案: