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

Question

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

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

Answer 1

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

• CSS Gradient Text Effect - Tutorial

它仍然使用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属性在起作用。