我真的很喜欢双色按钮和字体的外观.我在想,当字体的上半部分是一种颜色,下半部分是相同颜色的变体.例如,看到iPhone上的大多数按钮或这里的标志为
http://ming.ly.
解决方法
I managed to achieve that with CSS …
例
CSS
div {
position: relative;
color: #0f0;
font-size: 28px;
}
div span {
height: 50%;
position: absolute;
color: #f00;
overflow: hidden;
}
HTML
<div>
<span>Hello</span>
Hello
</div>
在Firefox 5中测试.
请记住,重复显示一次文本不是非常重要的语义.
根据您需要支持的浏览器,您可以在CSS中将此内容覆盖到此类内容中
div:before {
content: "Hello";
height: 50%;
position: absolute;
color: #f00;
overflow: hidden;
}
据我所知,对于将自动使用该元素的文本节点的内容没有价值.您可以将其放在title属性上,并使用attr(title)(或任何其他属性).
您也可以使用JavaScript来进行重复.
var textRepeat = document.createElement('span'),textRepeatTextNode = document.createTextNode(element.firstChild.data);
element.appendChild(textRepeat.appendChild(textRepeatNode));
如果第一个孩子不一定是文本节点,可以使用element.textContent || element.innerText.
