CSS로 레이어 및 텍스트 그라디언트 배치

저는 텍스트 그라디언트를 적용하려고하는 CSS 초보자입니다. 나는이 코드 here을 시도했으나 h1 오브젝트가 #header div 내에 중첩되어 있기 때문에 거의 저에게 효과적이지 않았습니다. 내가 알지 못하는 레이어와 관련이 있다고 상상해보십시오. 어느 것이 든 모든 것 앞에있는 계조 블록을 얻거나 전혀 나타나지 않습니다.CSS로 레이어 및 텍스트 그라디언트 배치

 <div id="header"> 
    <% unless flash[:notice].blank? %> 
    <div id="notice"><%= flash[:notice] %></div> 
    <% end %> 
     <%= image_tag ("header-image.png") %> 
     <h1><span></span>Headline</h1> <strong>Byline</strong> 
... #navbar html... 
</div>

(나는 따라서 표기 레일에 루비를 사용하고 있습니다) 여기

#header { 
    clear:both; 
    float:left; 
    -moz-background-inline-policy:continuous; 
    -moz-background-origin:padding; 
    background:#080E73 url(../images/header-background.png) repeat-x left 0px; 
    width:100%; 
    max-height: 175px; 
    color: #080E73; 
} 
#header h1 { 
    margin-bottom: 0; 
    color: #000; 
    position: relative; 
} 
#header h1 span { 
    background:url(../images/headline-text.png) repeat-x; 
    display: block; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
}

는 HTML입니다 :이 코드는 큰 그라디언트 막대를 만드는이 특정 인스턴스에서

모든 것을 앞에 나타납니다

Z-index로 연주를 시도했지만 좋은 결과를 얻을 수 없었습니다. 어떤 아이디어?

출처

2010-02-05 Kenji Crosland

나에게 잘 보입니다. 'div '에 중첩하는 것은'h1'이'position : relative'를 갖는 한 중요하지 않습니다. 이것은'span'에 대한 컨테이너로 설정해야합니다. – Kornel

제발 편집하고 귀하의 HTML을 첨부하십시오 –

흠 ... 어쩌면 내가 주위에 떠있는 이상한 선택기가 작동하지 않습니다. –

"이 코드는 모든 것 앞에 큰 그라디언트 막대를 표시합니다"라고 말하면 그라데이션은 모든 것 앞에 표시되지만 투명하고 배경색과 같은 색으로되어 있습니다.

PNG를 올바르게 내 보내지 않았을 가능성이 있습니까? 또는 투명도를 적용한 색상 블록이 올바른 색상이 아닌지 확인하십시오.

출처

2010-03-25 01:05:18 jonhobbs

CSS로 레이어 및 텍스트 그라디언트 배치

답변

관련 문제