1

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

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

让我可编辑

4

2 回答 2

2

您可能想查看Web Designer Wall的CSS Gradient Text Demo。

它仍然使用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.png.

此外，请务必查看html5demos.com - contenteditable 演示以了解 HTML 5contenteditable属性的实际作用。

于 2010-01-21T11:44:50.640 回答
0

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

于 2010-01-21T16:06:12.017 回答