我要找的是：
一种为角色的一半设置样式的方法。（在这种情况下，一半的字母是透明的）
我目前搜索并尝试的内容（运气不佳）：
半个字符/字母的样式设置方法使用CSS或JavaScript设置字符的部分样式将CSS应用于50%的字符
下面是我试图获得的一个例子。
对此，是否存在CSS或JavaScript解决方案，还是我必须求助于图像？我宁愿不走图像路线，因为文本最终将动态生成。
更新：
既然很多人都问我为什么要塑造一个角色的一半，这就是为什么。我所在的城市最近花了25万美元为自己定义了一个新的“品牌”。这个标志就是他们想出的。许多人抱怨网站的简单和缺乏创造力，并继续这样做。我的目标是把这个网站当成一个笑话。输入“哈利法克斯”，你就会明白我的意思。
当前回答
您可以使用以下代码。在此示例中，我使用了h1标记，并添加了一个属性数据title text=“Display text”，它将在h1标记文本元素上显示不同颜色的文本，这会产生如下示例所示的半彩色文本效果
正文{文本对齐：居中；边距：0；}h1小时{颜色：#111；字体系列：arial；位置：相对；字体系列：“Oswald”，无衬线；显示：内联块；字体大小：2.5em；}h1:：之后{content:attr（数据标题文本）；颜色：#e554e；位置：绝对；左：0；顶部：0；剪辑：矩形（0，1000px，30px，0）；}<h1 data title text=“显示文本”>显示文本</h1>
其他回答
您可以使用以下代码。在此示例中，我使用了h1标记，并添加了一个属性数据title text=“Display text”，它将在h1标记文本元素上显示不同颜色的文本，这会产生如下示例所示的半彩色文本效果
正文{文本对齐：居中；边距：0；}h1小时{颜色：#111；字体系列：arial；位置：相对；字体系列：“Oswald”，无衬线；显示：内联块；字体大小：2.5em；}h1:：之后{content:attr（数据标题文本）；颜色：#e554e；位置：绝对；左：0；顶部：0；剪辑：矩形（0，1000px，30px，0）；}<h1 data title text=“显示文本”>显示文本</h1>
我刚刚玩了@Arbel的解决方案：
var textToHalfStyle=$（'.textToHalfStyle'）.text（）；var textToHalfStyleChars=textToHalf-Style.split（“”）；$（'.textToHalfStyle'）.html（''）；$.each（textToHalfStyleChars，函数（i，v）{$（'.textToHalfStyle'）.append（'<span class=“halfStyle”data content=“'+v+'”>'+v+'</span>'）；});正文{背景色：黑色；}.text转换为半样式{显示：块；边距：200px 0 0；文本对齐：居中；}半样式{字体系列：'Libre Baskerville'，衬线；位置：相对；显示：内联块；宽度：1；字体大小：70px；颜色：黑色；溢出：隐藏；空白：pre；文本阴影：1px 2px 0白色；}半样式：之前{显示：块；z指数：1；位置：绝对；顶部：0；宽度：50%；内容：属性（数据内容）；/*伪元素的动态内容*/溢出：隐藏；颜色：白色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js“></script><span class=“textToHalfStyle”>Dr。Jekyll和M.Hide</span>
JSFiddle演示
我们将只使用CSS伪选择器来实现！
该技术将使用动态生成的内容和不同的字体大小和宽度。
HTML格式：
<div class='split-color'>Two is better than one.</div>
CSS:
.split-color > span {
white-space: pre-line;
position: relative;
color: #409FBF;
}
.split-color > span:before {
content: attr(data-content);
pointer-events: none; /* Prevents events from targeting pseudo-element */
position: absolute;
overflow: hidden;
color: #264A73;
width: 50%;
z-index: 1;
}
要包装动态生成的字符串，可以使用如下函数：
// Wrap each letter in a span tag and return an HTML string
// that can be used to replace the original text
function wrapString(str) {
var output = [];
str.split('').forEach(function(letter) {
var wrapper = document.createElement('span');
wrapper.dataset.content = wrapper.innerHTML = letter;
output.push(wrapper.outerHTML);
});
return output.join('');
}
// Replace the original text with the split-color text
window.onload = function() {
var el = document.querySelector('.split-color'),
txt = el.innerHTML;
el.innerHTML = wrapString(txt);
}
.halfStyle {
position:relative;
display:inline-block;
font-size:68px; /* or any font size will work */
color: rgba(0,0,0,0.8); /* or transparent, any color */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
transform:rotate(4deg);
-webkit-transform:rotate(4deg);
text-shadow:2px 1px 3px rgba(0,0,0,0.3);
}
.halfStyle:before {
display:block;
z-index:1;
position:absolute;
top:-0.5px;
left:-3px;
width: 100%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
color: white;
transform:rotate(-4deg);
-webkit-transform:rotate(-4deg);
text-shadow:0 0 1px black;
}
http://experimental.samtremaine.co.uk/half-style/
你可以把这段代码塞进各种有趣的事情中——这只是我和同事昨晚想出的一个实现。
是的，您可以只使用一个字符和CSS：
http://jsbin.com/rexoyice/1/
h1小时{显示：内联块；边距：0；/*用于演示片段*/线条高度：1em；/*用于演示片段*/字体系列：helvetica，arial，sans-serif；字号：粗体；字体大小：300px；背景：线性梯度（向右，#7db9e8 50%，#1e5799 50%）；背景剪辑：文本；-webkit文本填充颜色：透明；}<h1>X（X）</h1>
从视觉上看，所有使用两个字符的示例（无论是通过JS、CSS伪元素还是HTML）看起来都很好，但请注意，所有这些都会向DOM添加内容，这可能会导致可访问性——以及文本选择/剪切/粘贴问题。
