最佳答案
您可能需要检查 CSS Gradient Text Demo通过 Web Designer Wall .
它仍然使用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 Text Effect Tutorial将告诉您如何创建 gradient.png
.
此外,请务必检查 html5demos.com - contenteditable demo查看 HTML 5 contenteditable
属性在起作用。
关于javascript - 渐变填充内容可编辑的 HTML 文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2108851/