位置：相对破坏背景剪辑：文本

Question

I'm using background-clip: text on an element with some child <p> elements. I wanted to add some :after elements to the <p> tags and position then absolutely in order to cover up the text and do some animations, but when I set position: relative on the <p> tags, they disappear. I'm guessing it has something to do with the combination of background-clip and color: transparent . It's like it removes the ability to use background-clip . Is there a way to get this working?

 * { margin: 0; padding: 0; box-sizing: border-box; } html,body { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; } body { flex-direction: column; } .container { background: linear-gradient(to bottom, white, black); background-clip: text; -webkit-background-clip: text; text-align: center; } .container p { font-size: 5em; line-height: 1; font-weight: 900; text-transform: uppercase; color: transparent; -webkit-text-fill-color: transparent; } .container.relative p { position: relative; } /* .container.relative p:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: black; } */

 <p>The text below is relative, and appears invisible</p> <div class="container relative"> <p>Some Relative</p> <p>Text</p> </div> <p>The text below is <strong>not</strong> relative and is visible</p> <div class="container"> <p>Some</p> <p>Text</p> </div>

https://jsfiddle.net/Rissk13/pa1v6gdr/1/

Answer 1

Here is an idea with more gradient where you don't need position:relative .

Hover to see the effect:

 * { margin: 0; padding: 0; box-sizing: border-box; } html,body { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; } body { flex-direction: column; } .container { background: linear-gradient(to bottom, white, black); background-clip: text; -webkit-background-clip: text; text-align: center; } .container p { font-size: 5em; line-height: 1; font-weight: 900; text-transform: uppercase; color: transparent; -webkit-text-fill-color: transparent; } .container p { background:linear-gradient(#000,#000); background-repeat:no-repeat; background-size:0% 100%; background-position:left; transition:1s; } .container p:hover { background-size:100% 100%; }

 <p>The text below is <strong>not</strong> relative and is visible</p> <div class="container"> <p>Some</p> <p>Text</p> </div>