干杯!
我是CSS/HTML的新手,但我想在文本上应用渐变,就像下面的图片一样。我该如何用CSS实现呢?
相关的CSS位于我使用的<article>
包装器的伪元素:after
上。
article {
position: relative;
}
article:after {
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
content: "";
background: linear-gradient(to top,
rgba(255,255,255, 1) 20%,
rgba(255,255,255, 0) 80%
);
pointer-events: none; /* so the text is still selectable */
}
<article>
<p>
Had you stepped on board the Pequod at a certain juncture
of this post-mortemizing of the whale; and had you strolled
forward nigh the windlass, pretty sure am I that you would
have scanned with no small curiosity a very strange, enigmatical
object, which you would have seen there, lying along lengthwise
in the lee scuppers. Had you stepped on board the Pequod at a certain
juncture of this post-mortemizing of the whale; and had you strolled
forward nigh the windlass, pretty sure am I that you would
have scanned with no small curiosity a very strange, enigmatical
object, which you would have seen there, lying along lengthwise
in the lee scuppers.
</p>
</article>
CSS3文本渐变只被Webkit浏览器支持,如Chrome和Safari。我使用了三种不同的方法。 首先请查看这个fiddle http://jsfiddle.net/sarfarazdesigner/pvU7r/。 尝试一下。
.article{
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
这在Chrome中运行良好,不知道其他浏览器的反应如何。参考自http://css-tricks.com/snippets/css/gradient-text/
-webkit-
前缀。
article {
-webkit-mask-image: linear-gradient(0deg, transparent 16px, red 66px);
/* 0deg = down, 90deg = left, 180deg = top, 270deg = right */
}
<article>
<p>
Had you stepped on board the Pequod at a certain juncture
of this post-mortemizing of the whale; and had you strolled
forward nigh the windlass, pretty sure am I that you would
have scanned with no small curiosity a very strange, enigmatical
object, which you would have seen there, lying along lengthwise
in the lee scuppers. Had you stepped on board the Pequod at a certain
juncture of this post-mortemizing of the whale; and had you strolled
forward nigh the windlass, pretty sure am I that you would
have scanned with no small curiosity a very strange, enigmatical
object, which you would have seen there, lying along lengthwise
in the lee scuppers.
</p>
</article>