请耐心等待,但假设这段代码:
<style>
span {
color: black;
background-color: black;
}
</style>
<span>Hello world</span>
Hello World
给出的结果如下所示:
███████████
是否可以仅将样式应用于字母高度,而不是字体/行高?实际上,结果看起来像这样:
█▄██▄ ▄▄▄██
最佳答案
不(无论如何都没有背景颜色)。背景颜色应用于整个元素(例如 span 元素),它本质上是一个由 CSS 框模型确定的框。 official recommendation来自 W3C 的 指定背景颜色将填充框模型的内容、填充和边框区域。 CSS3 background (candidate recommendation)为您提供更多功能来控制应用背景颜色的位置,但并不多。
如果你真的想要你刚才在问题中展示的效果,我认为一个 JavaScript 函数可以将“短”字符(例如“w”)转换为“▄”和“高”字符(例如“h” ") 到 "█"会很好地工作。 Here's a demo on jsfiddle .
关于CSS:如何根据字符高度与行高设置样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11821935/