CSS渐变文本问题
我正在尝试复制此内容： http://webdesignerwall.com/tutorials/css-渐变文本效果 但是我似乎无法让它工作，尽管我使用了相同的代码。
这是我的 HTML：
<h1><span></span>Sign Up</h1>
和 CSS：
h1 {
font-family: arial;
font-weight: bold;
font-size: 24px;
position: relative;
color: #a2a2a2;
}
h1 span {
background: url(gradient.png) repeat-x scroll 0 0 transparent;
opacity: 1;
position: absolute;
display: block;
margin-top: 2px;
width: 100%;
height: 21px;
}
这就是发生的情况：
帮助都会很棒！谢谢。
I'm trying to replicate this: http://webdesignerwall.com/tutorials/css-gradient-text-effect however I can't seem to get it to work, although I've used the same code..
This is my HTML:
<h1><span></span>Sign Up</h1>
And CSS:
h1 {
font-family: arial;
font-weight: bold;
font-size: 24px;
position: relative;
color: #a2a2a2;
}
h1 span {
background: url(gradient.png) repeat-x scroll 0 0 transparent;
opacity: 1;
position: absolute;
display: block;
margin-top: 2px;
width: 100%;
height: 21px;
}
And this is what happens:
Any help would be great! Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
问题出在你的“渐变图像”上。
您应该使用仅包含与背景相同颜色的渐变，但渐变的不透明度从 0% 左右开始，到 100% 左右结束（您可以选择确切的数字）。
我已将 演示图像 加载到Photoshop，并将其加宽，以便您可以在 Photoshop 中看到它的样子：
The problem is with your "gradient image".
You're supposed to use a gradient containing only the same colour as the background, but with the opacity of the gradient starting at around 0% and ending at around 100% (your choice exactly what numbers).
I've loaded the demo image into Photoshop, and made it wider so you can see what it should look like in Photoshop:
嗯...您的文字超出了范围？
除此之外，他们使用的渐变是白色背景上的白色渐变。您在白色背景上使用黑色渐变:)可能会有所不同
ehmm...your text is outside the span?
And besides that, the gradient they use is a white gradient on a white background. You are using a black gradient on a white background :) Might be the difference
您应该使渐变文件使用与页面背景相同的颜色作为“油漆”，并保持其余部分透明
You should make your gradient file use the same color as the background of your page as the 'paint' and keep the rest transparent