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

【问题标题】：Gradient-filled contentEditable text in HTML渐变填充内容 HTML 中的可编辑文本
【发布时间】：2019-06-06 12:04:28
【问题描述】：

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

文本应该是可编辑的。

【问题讨论】：

标签： javascript html css contenteditable vml

【解决方案1】：

您可能需要通过Web Designer Wall 来检查CSS Gradient Text Demo。

CSS Gradient Text Effect - Tutorial

它仍然使用png图像来实现渐变，但它满足“文本应该具有相同效果的可编辑”，如果通过可编辑意味着它可以突出显示，复制，爬行等。

更新：

除了下面的 cmets，您可能还需要考虑使用 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 属性的作用。

【讨论】：

我应该允许我输入它。
而不是像这个 CSS 演示允许的那样“只是”可选择
对不起，我误解了原来的问题。查看我更新的答案以获取一些提示。
只是一个简短的说明 - contenteditable 属性不仅在 HTML5 中 - 它得到了非常广泛的支持。我在这个例子中测试了它（使用 Firebug），它工作正常。

【解决方案2】：

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

【讨论】：