투명 상자 CSS를 격자에 겹쳐 놓습니다.

Question

일부 텍스트 정보를 표시 할 이미지가 있습니다. 나는 그 아래에 투명 배경과 모든 포맷 된 정보를 담고있는 div를 가지고있다. margin-top: -50%을 사용하여 이미지 위로 가져올 수 있지만 그리드 (1140)를 사용하고 있기 때문에 화면이 축소되면 모든 것이 일치하지 않습니다.

.fourcol 
    .book 
    img src="#{book.image_url}" 
    .book-info 
     header 
     h4.title 
      = book.title 
     h6.author 
      = book.author 
     p.description 
     = book.description 

관련 CSS (슬림)에

HTML이 :

.book-info { 
     margin-top: -62%; 
     padding: 1em; 
     padding-bottom: 1.5em; 
     float: left; 
     background-color: black; 
     opacity: .8; } 

수는 바닥 그래서 책 - 정보 규모가 항상 어떻게 여기

는 내가 지금까지 무엇을 가지고 이미지 맨 아래에?

Answer 1

당신은 .book 관련하여 그 위치를 .book-info에 position: absolute를 사용할 수 있습니다

.book { 
    position: relative; 
    overflow: hidden; /* to clear the floats inside */ 
} 

.book-info { 
    position: absolute; 
    bottom: 0; 
} 

이 demo를 참조하십시오.

Answer 2

정보가 들어있는 div를 이미지가 포함 된 래퍼에 넣어야합니다.

<style type="text/css"> 
    #info 
    { 
     position: relative; 
     bottom: 0px; 
     width: 100%; 
     height: 4%; 
     opacity: 0.5; 
    } 
    #theImage 
    { 
     width: 100%; 
     height: 100%; 
    } 
    #wrapper 
    { 
     width: 15%; 
     height: 15%; 
     overflow: hidden; 
    } 
</style> 

<div id="wrapper"> 
    <img id="theImage" src="..." alt="" /> 
    <div id="info">Information about the image</div> 
</div>