Позиционирование слоев и градиентов текста с помощью css

Я новичок в CSS, пытающийся получить некоторые градиенты текста. Я пробовал этот код here, но это не сработало для меня, скорее всего, потому что объект h1 вложен в div #header. Я думаю, что есть что-то делать со слоями, о которых я не знаю. Либо я получаю блок градиента, который находится впереди всего, либо не появляется вообще.Позиционирование слоев и градиентов текста с помощью css

В данном конкретном случае этот код делает большой градиент бар появляется перед всем:

#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 (я использую рубин на рельсах, следовательно, обозначение)

 <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>

Я пробовал играть с z-index, но я не мог придумать никаких хороших результатов. Есть идеи?

источник

2010-02-05 Kenji Crosland

У меня все хорошо. Вложение в 'div' не имеет значения, поскольку' h1' имеет 'position: relative', который должен установить его как контейнер для' span'. – Kornel

отредактируйте и добавьте свой html –

Хм ... Может быть, у меня есть нечетный селектор, плавающий вокруг, что делает его неработоспособным. –

Когда вы говорите, что «этот код делает большой градиентный бар перед всеми», предполагается, что градиент должен появиться перед всем, но он должен быть прозрачным и того же цвета, что и ваш фоновый цвет.

Возможно ли, что вы не экспортировали PNG правильно? или что блок цвета, на который вы применили прозрачность, не соответствует цвету?

источник

2010-03-25 01:05:18 jonhobbs

Позиционирование слоев и градиентов текста с помощью css

ответ

Смежные вопросы