제목 배경 배치

Question

좋아, CSS에서 꽤 경험이 있지만,이 시점에서 나는 손실에 있습니다.

그러나 alt text http://screensnapr.com/u/qz26q5.png

, 내가 CSS로 접근 할 수있는 가장 가까운는 다음과 같습니다 :

alt text http://screensnapr.com/u/s7xi7a.png

내가 필요

가 나는 제목이 포토샵에서 같이 할 방법을 시켜요 검정색 배경은 이미지의 가장자리까지 확장하고 제목 오른쪽에는 패딩을 적용합니다.

내 질문에 대한 이해를 바랍니다! 감사.

<div class="glossary_image"> 
    <img src="<?php echo $custom_fields['image'][0]; ?>" /> 
    <div class="title"> 
     <h2><?php the_title(); ?></h2> 
    </div> 
</div> 

와 CSS :

.glossary_image { 
    position: relative; 
    height: 300px; 
    width: 300px; 
    margin-top:10px; 
    margin-bottom: 10px; 
} 

.glossary_image .title { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    padding: 10px; 
} 

.glossary_image .title h2 { 
    display: inline; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 30px; 
    font-weight:bold; 
    line-height: 35px; 
    color: #fff; 
    text-transform:uppercase; 
    background: #000; 
} 

Answer 1

이 .glossary_image .title에서 padding를 제거하고 .glossary_image .title h2에 padding-right: 10px;를 추가 여기

는 HTML입니다.
h2에 padding-top을 추가 할 수도 있습니다.

Answer 2

이미지를 div 요소의 배경으로 만들 수 있습니다. 이렇게하면 오버레이 위치 지정이 문제가되지 않습니다.