CSS를 사용하여 이미지 위에이 캡션을 어떻게 설정해야합니까?

Question

        나는 반응 형 디자인에 뛰어 들기 시작했으며, 결과적으로 내 CSS에서 모범 사례를 정확히 찾아 내려고 노력하고 있습니다. 나는 결국 사용자 정의 jquery 구동 이미지 슬라이더에 캡션 텍스트를 배치하려고합니다.

       이 모든 http://www.taylorp0994.net/websites/cincoschool/index.html에서 실행되므로 자세한 내용은 라이브 결과와 코드를 찾아보세요.

        나는 실행 가능한 해결책 인 것으로 나타났습니다. 그러나 문맥에 관계없이 픽셀을 사용하는 것이 의미 론적이지 않다는 것을 두려워합니다. 같은 표정과 어떤 접근 방식 (마진 - 상단, 위치 : 상대/상단 등)을 얻기 위해 백분율을 사용할 수 있습니까? 아직 캡션 상자를 상대적으로 배치하고 위로 이동하여 현재의 솔루션 인 -46.5px를 배치하는 것이 현명한 솔루션을 제외하고는 많은 성공을 거두지 못했습니다.

Answer 1

게시 한 작업이 실제로 유망 해 보입니다. 내 피상적 인 모습에서 언급 할 가치가

두 가지 :

픽셀 측정을 사용하여 특히 '잘못된'거기에 아무것도

• . 이것이 잠재적으로 당신에게 문제가되는 유일한 시간은 캡션의 길이입니다. 텍스트의 길이가 변경 될 수 있으므로 (즉, 두 줄로 롤), 설정된 높이 조정을 사용하면 작동하지 않습니다.
• 캡션 안에 빈 'p'태그가 많이 있습니다. 의도적입니까?
  • 이미지 및 캡션을 모두 포함하는 단일 사업부 랩 유무 :
  는

  나는 이런 유형의 작업을 해결하는 경향이 방법은 위치를 사용하는 것입니다. 이 상대를 배치하십시오.

• 이미지 z- 인덱스를 낮은 수로 설정하십시오.
• 캡션의 z- 인덱스를 높게 설정하고 position : absolute, bottom : 0으로 설정합니다. 그러면 캡션이 상위 div의 아래쪽 가장자리에 위치하게되고 캡션이 이미지의 높이를 상속합니다.

2 초 후에 예제를 게시합니다. 여기

당신은 갈 : http://jsfiddle.net/HhuhR/이 매우 빠른 앤 더러운하지만 곧 정상 궤도에 당신을 넣어 도움이 될 것입니다

<style> 
    .img-wrap{ 
     width: 60%; /*just here for the preview */ 
     position: relative; 
    } 
     .img-wrap img{ 
      max-width: 100%; 
      z-index: 1 
     } 
     .img-wrap .caption{ 
      display: block; 
      width: 100%; 
      position: absolute; 
      bottom: 5px; /*if using padding in the caption, match here */ 
      left: 0; 
      z-index: 2; 
      margin: 0; 
      padding: 5px 0; 
      text-indent: 5px; 
      color: #fff; 
      font-weight: bold; 
      background: rgba(0, 0, 0, 0.4); 
     } 
</style> 

<div class="img-wrap"> 
    <img src="http://taylorp0994.net/websites/cincoschool/img/slide1.png" alt= ""> 
    <span class="caption">Lorem ipsum dolor sit amet</span> 
</div> 

뷰포트의 폭이 좁아 질수록, 캡션 텍스트가 지배 것이라는 점을 기억하십니까 이미지 (이미지 자체가 작아짐). 내 디자인에서 이것이 문제가되는 지점을 식별하는 경향이 있으며 하단/왼쪽 및 위치 설정 캡션 위치를 덮어 씁니다. 상대적 - 캡션을 오버랩하지 않고 캡션을 이미지 아래에 놓습니다. .