상대 div (이미지 포함) 내에 절대 위치 div (일부 텍스트 포함)가 있고 bottom : 0px로 설정되어 있습니다. 그러나 절대 div가 이미지 아래로 넘칩니다. 이 문제를 해결할 수없는 것 같지만 오버플로 : 상대 div에 숨김을 적용 해 보았습니다.
문제는 아래를 참조하십시오 https://jsfiddle.net/rebeccasmith1301/zzpxe767/
HTML
<div id="page-wrapper">
<div id="footer-header-image">
<div id="header-image-title">
<h2>Some text</h2>
</div>
<img src="http://trustedfinance.co.uk/wp-content/uploads/2014/06/placeholder.png" id="apprentice-img"/>
</div>
</div>
CSS
#page-wrapper {
background-color: red;
height: 400px;
}
#footer-header-image {
position:relative;
}
#header-image-title {
position: absolute;
left: 1.5%;
bottom: 0px;
z-index: 1000;
background-color: rgba(255, 255, 255, .85);
padding: 2% 1.5% 2% 1.5%;
}
#apprentice-img{
width: 100%;
}
이미지에 약간의 선 높이가 있습니다. 시험:
#apprentice-img{
width: 100%;
display:block;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다