渐变填充的内容HTML中的可编辑文本

Question

我可以在不使用图像的情况下在HTML中使用这种效果吗？

该文本应该可以用这种效果编辑。

Make me editable http://www.freeimagehosting.net/uploads/3e44cf853d.png

Answer 1

您可能希望通过CSS Gradient Text DemoWeb Designer Wall检查。

• CSS Gradient Text Effect - Tutorial

它仍然使用png图片来实现渐变，但它满足“文本应该是可编辑相同的效果”，如果编辑你的意思，它可以突出显示，复制，爬网等

UPDATE：

而且下面的评论，你可能要考虑使用HTML 5contenteditable属性。您可以将上述梯度技术应用于可编辑文本。

你可以使用正常使用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属性。

Answer 2

WebKit有一些你可能喜欢的东西：http://webkit.org/blog/164/background-clip-text/