Question

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

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

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

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属性的实际效果。

Answer 2

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

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

2 个答案: