Текст идет за градиентом

Im все еще делает reponsive меню, с контролем прокрутки. Я добавил градиент в свое меню, но хочу, чтобы этот градиент шел впереди моих ссылок и скрывал их за ним. Есть JSFiddle, вы можете проверить его.Текст идет за градиентом

Там вы можете увидеть мой градиент CSS в моем меню

#page .page-nav { 
    background: white -webkit-linear-gradient(left, transparent 50px, red); 
    background-size: 40% 100%; 
    background-repeat: no-repeat; 
    background-position: right; 
}

Любые решения, как сделать это?

источник

2016-12-05 Daniels Jirgensons

Насколько я знаю,

Вы можете сделать это с префиксами и это не поддерживается в IE (даже IE 11)

Если кто-то здесь не знает лучшего способа для его реализации, я бы советую против.

body { 
 
    background: #111; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    font-size: 50px 
 
} 
 
.page-nav { 
 
    background: linear-gradient(to right, #900, #999); 
 
    -webkit-background-clip: text; 
 
    -moz-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    -moz-text-fill-color: transparent; 
 
}

<body> 
 
    <p class="page-nav">Sample Sample</p> 
 
</body>

источник

2016-12-05 11:52:32

Текст идет за градиентом

ответ

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