顺风中伪类的图像叠加

Question

我正在尝试使用

tailwindcss

添加静态颜色的图像叠加。如果您检查浏览器，父 div 仅采用图像的大小，因此理想情况下，如果我使用

before

或

w-full

，

h-full

伪类应该采用父级的高度和宽度。因为它也是

div

的孩子。但事实并非如此。

我只用 css 尝试过，我想我可能在 tailwindcss 中犯了错误（因为我刚开始使用它）但结果是一样的。

<script src="https://cdn.tailwindcss.com"></script>
<div class="iniline before:content-{} before: inline before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-full before:w-full before:bg-fuchsia-600 before:opacity-30">
  <img src="//unsplash.it/201" alt="Image" class="relative z-0" />
</div>

Answer 1

考虑通过

<div>

类应用

position: relative

使

relative

成为位置父母。要“收缩”图像的宽度，您可以通过

width: max-content

将

<div>

应用于

w-max

。

<script src="https://cdn.tailwindcss.com"></script>

<div class="relative w-max before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-full before:w-full before:bg-fuchsia-600 before:opacity-30">
  <img src="//unsplash.it/201" alt="Image" class="relative z-0" />
</div>