CSS 多行渐变文本。 -webkit-背景剪辑

发布于 2025-01-01 01:33:58 字数 1125 浏览 2 评论 0原文

我正在使用 CSS 在我的文本上生成渐变...问题是我的文本是多行的，因此渐变不会在每一行上重置...整个段落变成 1 个巨大的渐变！我可以为分隔线中的每一行文本获得单独的渐变效果吗？这是我的代码：

<html>
<head>
<style type='text/css'>p.p1 {
    margin: 0.0px 0.0px 0.0px 50.0px; 
    font: 50.0px Helvitica; 
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica, Arial', 'Lucida Grande', 'sans-serif'; 
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    }
</style>
</head>
<body bgcolor='#FFFFFF'>
<div style='word-wrap: break-word;'>
<p class='p1'>
<font face='helvetica' color='#000000'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id vestibulum lectus. Maecenas facilisis orci vitae urna pulvinar cursus. Etiam id laoreet metus. Cras vitae elit ipsum. Donec a sagittis nisi. Sed nec nisi nibh, fringilla fermentum quam. Vestibulum lorem felis, gravida et faucibus ac, ultrices nec lectus.
</font>
</p>
</div>
</body>
</html>

原文

I am using CSS to generate a gradient on my text... The problem is my text is multi-lined so the gradient doesn't reset on each line... the whole paragraph becomes 1 huge gradient! Can I get an individual gradient effect for each line of text in my divider? Here is my code:

<html>
<head>
<style type='text/css'>p.p1 {
    margin: 0.0px 0.0px 0.0px 50.0px; 
    font: 50.0px Helvitica; 
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica, Arial', 'Lucida Grande', 'sans-serif'; 
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    }
</style>
</head>
<body bgcolor='#FFFFFF'>
<div style='word-wrap: break-word;'>
<p class='p1'>
<font face='helvetica' color='#000000'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id vestibulum lectus. Maecenas facilisis orci vitae urna pulvinar cursus. Etiam id laoreet metus. Cras vitae elit ipsum. Donec a sagittis nisi. Sed nec nisi nibh, fringilla fermentum quam. Vestibulum lorem felis, gravida et faucibus ac, ultrices nec lectus.
</font>
</p>
</div>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

追我者格杀勿论 2025-01-08 01:33:58

我删除了已弃用的标签并为您清理了代码。

p.p1 {
    margin: 0 0 0 50px; 
    font-size: 50px; 
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica, Arial', 'Lucida Grande', 'sans-serif'; 
    background: -webkit-repeating-linear-gradient(top, red 0px, blue 60px);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    }

演示

I got rid of the deprecated tags and cleaned the code up for you..

p.p1 {
    margin: 0 0 0 50px; 
    font-size: 50px; 
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica, Arial', 'Lucida Grande', 'sans-serif'; 
    background: -webkit-repeating-linear-gradient(top, red 0px, blue 60px);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    }

Demo

回复收藏 0 原文

~没有更多了~