Html 在其他文本之上呈现文本

我有一个元素，里面有一些文字。在上面，我有另一个元素，其中的文本完全相同。我想让top元素中的文本呈现在其他文本的顶部。但是，当我运行它时，无论是否显示底部元素，都可以得到明显不同的结果

对于黑色文本来说，这并不太糟糕，但是如果顶部元素的文本是红色的或以其他方式设置样式，则开始看起来很糟糕

如果将“不透明度”设置为0，则问题将消失，但浏览器将不再呈现底部元素的插入符号和文本选择，这会妨碍可用性。我试着在底部元素上设置字体的重量，但它似乎没有以任何方式改变文本

.fixFontAttributes{
字体大小：12px；
字体系列：“摩纳哥”、“Menlo”、“Ubuntu Mono”、“Droid Sans Mono”、“Consoleas”、monospace；
颜色：红色；
}

带文本区域
一些文本
一些文本
无文本区
一些文本

这是一种不同的方法，但您是否考虑过使用

contentEditable="true"

示例：

此div中的文本可以编辑。

您拍摄的结果到底是什么？我希望无论文本区域的不透明度如何，它看起来都是一样的-也就是说，文本区域对文本渲染没有明显的影响。虽然这与其说是一个解决方案，不如说是一个解决方案：为什么不用正确的空格数替换整个

文本？每当用户编辑

文本时，这些用户编辑就可以应用于字符串，只要有更改，字符串的内容就可以复制到

。虽然有点脏——我知道我真的非常困惑。您想神奇地将样式添加到正在键入的内容中吗？这听起来像是在尝试创建一个带有语法高亮显示的代码编辑器或其他什么？问题本身并不复杂，只是与解决方案高度相关。您将着手编写一个JS代码编辑器，其语法突出显示与富文本编辑器完全不同。但是，这两种方法都不包括文本区域顶部的透明

div

。你的问题散发出一股臭味，因为你打算实施一个很可能不符合手头实际问题的解决方案。人们正试图帮助你解决这个问题。在我看来，这似乎更为明智，尽管我怀疑这不是一开始就采用的方法的原因。希望OP能澄清。是的，我有。我真的不想使用这种方法，因为它允许用户编辑太多内容——他们可以插入随机的HTML并弄乱样式等等。在我当前的实现中，它们只能添加/删除文本，并且样式完全由代码控制。contenteditable div允许的用户自由度远远超过我实际想要的，特别是因为框中的内容必须是文本而不是其他内容。获取正确的输入事件并试图防止错误的输入将是非常混乱的。这些信息似乎属于问题。是否要禁止框中的任何和所有标记？如果是这样，您可以简单地使用javascript禁用尖括号的输入。（如果您肯定不想使用

contentEditable=“true”

，我就不会坚持了。）人们仍然可以复制粘贴、拖放或任何其他方式将非文本放入框中。