如何使用位置剪切图像：绝对溢出其容器/卡片之外

Question

向下滚动查看更新

原帖：

我正在制作一个卡片 html 代码，我想使用以一定角度切割的图像来设计它的样式。我尝试了很多方法，但似乎没有什么可以隐藏图像的溢出！这是目前的情况：

透明圆圈是导入的png，我不希望显示溢出位（应该只有粉红色方块，外面没有任何内容）。

全卡当前代码！

<div class="col-lg-9">
  <div class="card" style="
      margin-top: 80px; margin-bottom: 50px;
      background-color: #f25a7d; 
      min-height: 400px; max-height: 400px; 
      box-shadow:
        0 0 0 2px white,
        0 0 0 11px F79CB1;
      ">
      <!----------- pokeball decal ----------->
      <div style="flex-shrink: 0; height: 500px; width: 500px; opacity: 0.4; position: absolute; margin-top: -170px; margin-left: -160px">
        <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/94532125_ih8T8ykK5oGsXMd.png" style="transform: rotate(45deg); overflow: hidden;">
      </div>
      
    <p> test  text </p>
  </div>
</div>

我尝试将“overflow:hidden”放置在其他地方，但没有成功。 理想情况下，贴花应仅位于深粉色方块上，但我不介意它也超出边界。至少现在是这样。

编辑：

到目前为止，我更改了代码，使精灵球成为卡片的背景图像。我之前没有提到，由于网页限制（toyhouse 只允许一个唯一的 html 和内联 css），此代码无法使用外部 css 文件，因此我无法使用伪元素。我在油漆上将图像旋转了 45 度，然后按如下方式编辑卡片：

<div class="card" style="
    margin-top: 80px; margin-bottom: 50px;
    min-height: 400px; max-height: 400px;
    box-shadow:
      0 0 0 2px white,
      0 0 0 11px F79CB1;
    background-color: #f25a7d;
    background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/94536392_W6ciggvgXzG0QDq.png);
    background-repeat: no-repeat;
    background-size: 500px 500px;
    background-position: -170px -160px;
    ">

不透明度和旋转不能仅应用于精灵球，因为这只能通过伪元素来实现。由于限制，这实际上并不是我正在寻找的解决方案，因此我将问题保持开放。我希望原来的问题能找到另一个答案！

Answer 1

将

overflow:clip;position:relative

添加到卡片中。