사진 하단에 로고를 만들어서 로고가있는 워터 마크 사진처럼 보이게 만들고 싶습니다.
이제 문제는 절대 위치가 테두리를 벗어나 페이지 하단으로 이동한다는 것입니다.
나는 작은 조정이 여기 그림을 바꿀 수 있다고 확신합니다 (이중 의미).
jsFiddle :
내 코드는 다음과 같습니다.
HTML :
<section>
<ul>
<li>
<a href="">
<img src="http://www.reactive.com/Media/images/hero-ripcurl-01-2615749e-fba2-47da-abc7-d0ea3a9ecfbd-0-600x450.jpg" width=600 height=450>
<img src="https://puaction.com/img/logo.png" width=300 height=65>
</a>
<a href="">
<img src="http://img2.wikia.nocookie.net/__cb20120217141950/lego/images/6/67/Lego_lotr_2012_gollum-600x450.jpg" width=600 height=450>
<img src="https://puaction.com/img/logo.png" width=300 height=65>
</a>
</li>
</ul>
</section>
CSS :
section ul:first-child li {
height: 450px;
overflow: hidden;
width: 600px;
}
section ul:first-child li a img:nth-child(2) {
bottom: 0;
height: 65px;
position: absolute;
left: 0;
width: 300px;
z-index: 9999;
}
어떤 아이디어?
section ul:first-child li {
height: 450px;
overflow: hidden;
position: relative;
width: 600px;
}
li에 상대적 위치가 없습니다.
문제가 해결되기를 바랍니다.- 데모
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다