我可以在不使用图像的情况下在 HTML 中产生这种效果吗?
文本应该可以使用此效果进行编辑。
您可能想查看Web Designer Wall的CSS Gradient Text Demo。
它仍然使用png图像来实现渐变,但它满足“文本应该具有相同效果的可编辑”,如果通过可编辑意味着它可以突出显示、复制、爬行等。
更新:
除了下面的评论,您可能需要考虑使用HTML 5 contenteditable
属性。您也许可以在可编辑文本上应用上述渐变技术。
您通常会使用以下contenteditable
属性:
<section id="editable" contenteditable="true">
<h1>Gradient Text Here</h1>
</section>
如果您按照上面教程中的说明添加<span></span>
到您<h1>
的中,我相信它应该可以工作。
这没有经过测试。如果您尝试一下,请告诉我们情况如何!:
CSS:
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
HTML:
<section id="editable" contenteditable="true">
<h1><span></span>Gradient Text Here</h1>
</section>
CSS 渐变文本效果教程将告诉您如何创建gradient.png
.
此外,请务必查看html5demos.com - contenteditable 演示以了解 HTML 5contenteditable
属性的实际作用。
WebKit 有你可能喜欢的东西:http ://webkit.org/blog/164/background-clip-text/