패딩을 사용하여 상위 요소에서 형제 이미지/div의 겹치고 동일한 크기를 달성하는 방법

Question

이미지를 덮는 div를 원합니다. 부모 요소의 안쪽 여백을 채우는 position: relative，并在div中使用position: absolute来使div覆盖图像，但是background-color를 부모 요소에 사용하여 제대로 덮이지 않게 함으로써 이 작업을 수행할 수 있었습니다.

아래는 문제를 보여주는 스니펫입니다.

으아아아 으아아아

하단에 calc()来减去padding来实现相当接近的效果。这几乎可以工作，但是div패딩을 조금 너무 많이 사용했을 수도 있습니다. 어쨌든 패딩에 대한 많은 값을 하드코딩하고 싶지 않기 때문에 전혀 작동하더라도 이 솔루션은 별로 마음에 들지 않습니다.

다음은 calc() 방법을 보여주는 스니펫입니다.

으아아아 으아아아

Answer 1

HTML5를 사용하면 브라우저가 img标签的底部添加一些填充。可以通过将图像设置为块级元素来避免这种情况。所以只需在.image类中添加display: block그러고 나면 괜찮습니다.

그런데 절대 요소 너비/높이를 정의하려면 대신 calc()，还可以使用4个值top、right、bottom、left를 사용할 수 있습니다.

으아아아 으아아아

Answer 2

이 스니펫은 오버레이 div 내부에 img를 배치하고 실제 녹색의 불투명도가 낮은 오버레이를 오버레이 div의 다음 의사 요소로 사용하여 약간 다른 방식으로 수행합니다.

이렇게 하면 상위 요소의 패딩에 대한 지식을 쌓을 필요가 없습니다.

으아아아 으아아아