Как иметь линейный градиент под некоторым текстом?

На моей странице у меня есть несколько разделов. Я хочу показать линейный градиент в текущем активном разделе.Как иметь линейный градиент под некоторым текстом?

<div class='main_wrapper'> 
    <div class='header'> 
     Product 
    </div> 

    <div class='helper'> 
     Abc dda 
    </div> 
    <textarea>asdadadad</textarea> 
    <div class='active-section'></div> 
    </div>

Теперь, если у меня есть

.active-section, 
.active-section2{ 
    border-top: 1px solid #d8d8d8; 
    margin-left: 0px; 

    width:100%; 
    position: absolute; 
    top: 2px; 
    left: 0; 
    height: 107px; 

    background: rgb(216,216,216); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(216,216,216,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 

}

Тогда это будет на самом деле над текстом, который не нужен.

Следующее тоже не ожидается. У этого есть прозрачность, но это заставит текст выглядеть бледным.

.active-section2{ 
    background: -moz-linear-gradient(top, rgba(216,216,216,0.51) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,0.51)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(216,216,216,0.51) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 

}

Проверить эту скрипку: http://jsbin.com/ayimuk/2

Я просто хочу, чтобы иметь линейный градиент в активной части, высота градиента будет 100px (позволяет говорит). Я пробовал использовать z-index, который тоже не сработал.

источник

2013-05-09 Rakesh Juyal

может у нарисовать изображение за то, что у нужно – mastermind

@Adrift салют! Это то, чего я хотел. Вы можете опубликовать это как ответ, и я приму его. Спасибо –

@mastermind см. Решение Adrift. Это то, что мне нужно. –

Вы использовали z-index, но забыли, что вы не можете использовать это свойство без элемента, также имеющего значение position, отличное от значения по умолчанию - static. Добавление относительного позиционирования приведет к получению текста над градиентом.

http://jsbin.com/itowes/1/edit

источник

2013-05-09 13:10:06 Adrift

Как иметь линейный градиент под некоторым текстом?

ответ

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