如何在顶部带有文本和图像的 div 中间添加一条色带？

Question

我正在使用 React JS 和 Tailwind CSS 为客户制作网络漫画。我正在设计一些小角色描述，这是他给我的草图

这就是我目前所拥有的，还有代码

const CharacterItem = ({ name, isRevealed }) => {
  return (
    <div className="flex items-center font-comic gap-10 bg-white border border-black  mt-5">
      <img
        src={
          !isRevealed
            ? `/assets/cast/cast_${name}_silhouette.png`
            : `/assets/cast/cast_${name}.png`
        }
        className="h-1/12 w-1/12"
      />
      <div className="flex flex-col w-3/4 h-fit uppercase font-bold">
        <h3 className="text-3xl font-extrabold mt-5 mb-5">{name}</h3>
        <p className="text-xl bg-orange-400 p-7 w-full">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  )
}

export default CharacterItem

我尝试将 p 标签宽度设置为完整，并从其容器中删除填充，但是当它跨越其容器的整个右侧时，因为它们位于弹性盒中，所以它不会超过图像。我可以通过图像的相对或绝对定位来完成这项工作吗？

Answer 1

您可以在段落上使用伪元素，让我们看一个简单的示例：

.parent {
  --padding: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: var(--padding);
  border: 1px solid;
  overflow: hidden;
}

p {
  position: relative;
}

p::before {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  background: cyan;
  right: calc(var(--padding) * -1);
  width: 100vw;
  height: 100%;
}

<div class="parent">
  <img src="https://placehold.co/200" class="image" />
  <div class="content">
    <h3>{name}</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

p::before

有几个属性：

• right: calc(var(--padding) * -1)

  允许将盒子移动到容器的右侧。

  --padding

  是容器的填充物。

• width: 100vw

  的宽度刚好足以溢出容器。