位置：相對破壞背景剪輯：文本

Question

我在帶有一些子<p>元素的元素上使用background-clip: text 。 我想添加一些:after元素到<p>標簽和位置然后絕對是為了覆蓋文本並做一些動畫，但是當我在<p>標簽上設置position: relative時，它們消失了。 我猜這與background-clip和color: transparent的組合有關。 這就像它刪除了使用background-clip的能力。 有沒有辦法讓這個工作？

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

這是一個帶有更多漸變的想法，您不需要position:relative 。

懸停查看效果：

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