带有白色文本的线性渐变背景

Question

So I have the Title in my Navbar. The text has a linear gradient

nav li h1 {
background-image:linear-gradient(90deg,red,#ffae00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }

and I want the title to turn white and the background stay linear gradient

Example:

https://jsfiddle.net/qx96ku4h/

Answer 1

Simply put the values back to initial to disable the gradient on text and set the color of the text.

 header { position: fixed; background: #23262b; right: 0; left: 0; top: 0; height: 100px; z-index: 9999; } header:after { content: ""; background: -webkit-linear-gradient(30deg, red, #ffae00); display: block; height: 5px; width: 100%; position: absolute; bottom: 0; } nav ul { list-style-type: none; padding: 0; margin: -9px; margin-left: 20px; } nav li { display: inline-block; position: relative; text-align: center; letter-spacing: 1px; font-weight: 900; margin: 20px; } nav li { color: white; text-decoration: none; text-transform: uppercase; } nav li h1 { background-image: linear-gradient(90deg, red, #ffae00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #fff; padding: 20px; margin: 0; } #myBtn:hover h1 { -webkit-background-clip: initial; -webkit-text-fill-color: initial; border-radius: 20px; } 

 <header> <nav> <ul> <li onclick="topFunction()" id="myBtn" title="Go to top"> <h1>Make text White</h1> </li> </ul> </nav> </header>