html - CSS::before 元素似乎与它的父元素不匹配

Question

因此，当用户将鼠标悬停在图像上时，我试图在图像上显示渐变。我通过 :before 这样做并以这种方式添加它。

我的 html 布局是这样的:

<div class='portfolio_thumb'>
    <div class='portfolio_thumb_caption'></div
</div

还有我为这些元素设计的 CSS

.portfolio_thumb {
    width: 100%;
    height: 300px;
    background-size: cover;
}

    .portfolio_thumb .portfolio_thumb_caption:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
        content: '';
        opacity: 0;
        transform: translate3d(0,50%,0);
    }

    .portfolio_thumb:hover .portfolio_thumb_caption:before {
        transform: translate3d(0,0,0);
        opacity: 1;
    }

但我的问题是，当我将鼠标悬停在图像上时，渐变显示出来但它覆盖了我的整个内容区域(不是页脚或页眉)，渐变不应该只在那个主 div 上吗？” portfolio_thumb div ? 从我在网上看到的示例来看，情况似乎是这样，但如果不是，他们是如何实现的？

谢谢!

Answer 1

将此添加到您的 CSS:

.portfolio_thumb {
    position: relative;
}

伪元素仍然是其父元素的子元素，因此如果您想绝对定位它相对于其父元素(或祖父元素之一)的位置(并使用(祖)父元素的百分比宽度和高度伪元素的定义)，您需要明确定义其(祖)父元素的定位。发生的情况是，这会与具有显式定位定义的直接(祖) parent 建立上下文。