텍스트 오버레이는 응답

나는 텍스트 내 이미지에 오버레이를 만들려면이 자습서를 사용하고 있습니다 이미지가 사라지는 '.box'의 너비/높이로 %를 지정합니다. 분명히 비례하지 않는 고정 된 것 (예 : px) 일 수 있습니다.텍스트 오버레이는 응답

.box { 
cursor: pointer; 
height: 250px; 
position: relative; 
overflow: hidden; 
width: 400px; 
font-family: 'Open Sans', sans-serif; 
}

누구에게 아이디어가 있습니까? 미리 감사드립니다!

출처

2015-01-27 user3217495

min-width과 min-height을 시도해보십시오.

min-width: 100%; 
min-height: 100%;

출처

2015-01-27 04:07:31

감사합니다. 불행히도 그것은 작동하지 않았다. – user3217495

@ jkofron.e가 제안한 방법은 트릭 http://codepen.io/anon/pen/dPREBE를 수행하는 것 같습니다. –

일반적으로 라이브 프로젝트에서 우리는 응답 프레임 워크를 사용합니다. 부트 스트랩이나 기초처럼. 그래서 프레임 워크가 제대로 처리 할 수 있으므로 무시할 수 있다고 생각합니다. 아무 반응이 없도록 %를 사용할 필요가 없습니다. 부트 스트랩을 위해 우리는 비율이 부모의 높이를 기반으로하는 것처럼 내가 .box의 크기를 생각

<div class="row"> 
    <div class="col-md-4"> 
     <div class="box"> 
      <img src="http://files.room1design.com/oldcity.jpg"/> 
      <div class="overbox"> 
       <div class="title overtext"> 
        Walk This Way 
       </div> 
       <div class="tagline overtext"> 
        Follow the path of stone, a road towards an ancient past 
       </div> 
      </div> 
     </div> <!-- End box --> 
    </div> <!-- End Col-4 --> 
</div> <!-- End row -->

출처

2015-01-27 04:15:45

사용합니다. 몸에 높이가 지정되지 않았으므로 참조 프레임이 없습니다. .box에서 작동하는 백분율을 얻으려면 다음을 추가하십시오.

html, body { 
    height:100%; 
}

신체 치수를 부여한 후에 백분율을 사용하는 방법을 보여주기 위해 몇 가지 다른 변경 사항이 추가 된 업데이트 된 코드 백입니다.

http://codepen.io/anon/pen/dPREBE

출처

2015-01-27 04:26:32

텍스트 오버레이는 응답

답변

관련 문제