Tailwind/CSS 图像不应显示在容器外部答案

【问题标题】：Tailwind/ CSS image should not be shown outside containerTailwind/CSS 图像不应显示在容器外部
【发布时间】：2021-07-09 16:18:05
【问题描述】：

我仍在努力寻找解决问题的方法。

只有顶部 div 容器中的图标部分应该是可见的。顶部 div 容器之外的图标部分不应显示或隐藏。

https://play.tailwindcss.com/XyuTtdKbxV

谢谢 -戴夫

<div class="rounded rounded-xl w-72 h-32 bg-red-700 relative block">
    <div class="w-36 h-36 text-red-800 absolute -left-8 -bottom-8">
        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.3 by @fontawesome  - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M483.55,227.55H462c-50.68,0-76.07-61.27-40.23-97.11L437,115.19A28.44,28.44,0,0,0,396.8,75L381.56,90.22c-35.84,35.83-97.11,10.45-97.11-40.23V28.44a28.45,28.45,0,0,0-56.9,0V50c0,50.68-61.27,76.06-97.11,40.23L115.2,75A28.44,28.44,0,0,0,75,115.19l15.25,15.25c35.84,35.84,10.45,97.11-40.23,97.11H28.45a28.45,28.45,0,1,0,0,56.89H50c50.68,0,76.07,61.28,40.23,97.12L75,396.8A28.45,28.45,0,0,0,115.2,437l15.24-15.25c35.84-35.84,97.11-10.45,97.11,40.23v21.54a28.45,28.45,0,0,0,56.9,0V462c0-50.68,61.27-76.07,97.11-40.23L396.8,437A28.45,28.45,0,0,0,437,396.8l-15.25-15.24c-35.84-35.84-10.45-97.12,40.23-97.12h21.54a28.45,28.45,0,1,0,0-56.89ZM224,272a48,48,0,1,1,48-48A48,48,0,0,1,224,272Zm80,56a24,24,0,1,1,24-24A24,24,0,0,1,304,328Z"/></svg>
    </div>
<div>

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

由于您要标记 Tailwind，因此您可以使用带隐藏的溢出类。 IE。 overflow-hidden 在父容器上。

Tailwind播放链接，here。

HTML：

<div class="rounded rounded-xl w-72 h-32 bg-red-700 relative block overflow-hidden">
    <div class="w-36 h-36 text-red-800 absolute -left-8 -bottom-8">
        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.3 by @fontawesome  - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M483.55,227.55H462c-50.68,0-76.07-61.27-40.23-97.11L437,115.19A28.44,28.44,0,0,0,396.8,75L381.56,90.22c-35.84,35.83-97.11,10.45-97.11-40.23V28.44a28.45,28.45,0,0,0-56.9,0V50c0,50.68-61.27,76.06-97.11,40.23L115.2,75A28.44,28.44,0,0,0,75,115.19l15.25,15.25c35.84,35.84,10.45,97.11-40.23,97.11H28.45a28.45,28.45,0,1,0,0,56.89H50c50.68,0,76.07,61.28,40.23,97.12L75,396.8A28.45,28.45,0,0,0,115.2,437l15.24-15.25c35.84-35.84,97.11-10.45,97.11,40.23v21.54a28.45,28.45,0,0,0,56.9,0V462c0-50.68,61.27-76.07,97.11-40.23L396.8,437A28.45,28.45,0,0,0,437,396.8l-15.25-15.24c-35.84-35.84-10.45-97.12,40.23-97.12h21.54a28.45,28.45,0,1,0,0-56.89ZM224,272a48,48,0,1,1,48-48A48,48,0,0,1,224,272Zm80,56a24,24,0,1,1,24-24A24,24,0,0,1,304,328Z"/></svg>
    </div>
<div>

Tailwind 文档：Overflow

【讨论】：

【解决方案2】：

只需在类中创建一个类

 .show-inner {
     overflow: hidden;
  }

Please find solution here

【讨论】：

他正在使用 Tailwind，所以最好推荐一个 Tailwind 解决方案。