我要找的是：
一种为角色的一半设置样式的方法。（在这种情况下，一半的字母是透明的）
我目前搜索并尝试的内容（运气不佳）：
半个字符/字母的样式设置方法使用CSS或JavaScript设置字符的部分样式将CSS应用于50%的字符
下面是我试图获得的一个例子。
对此，是否存在CSS或JavaScript解决方案，还是我必须求助于图像？我宁愿不走图像路线，因为文本最终将动态生成。
更新：
既然很多人都问我为什么要塑造一个角色的一半，这就是为什么。我所在的城市最近花了25万美元为自己定义了一个新的“品牌”。这个标志就是他们想出的。许多人抱怨网站的简单和缺乏创造力，并继续这样做。我的目标是把这个网站当成一个笑话。输入“哈利法克斯”，你就会明白我的意思。
当前回答
我刚刚玩了@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>
其他回答
如果您愿意，也可以使用SVG执行此操作：
var title=document.querySelector（'h1'），text=title.innerHTML，svgTemplate=document.querySelector（'svg'），charStyle=svgTemplate.querySelector（'#text'）；svgTemplate.style.display=“块”；var空间=0；对于（var i=0；i<text.length；i++）{var x=charStyle.cloneNode（）；x.text内容=文本[i]；svgTemplate.appendChild（x）；x.setAttribute（'x'，空格）；space+=x.clientWidth||15；}title.innerHTML=“”；title.appendChild（svgTemplate）；<svg style=“display:none；height:100px；width:100%”xmlns=“http://www.w3.org/2000/svg“xmlns:svg=”http://www.w3.org/2000/svg“xmlns:xlink=”http://www.w3.org/1999/xlink“版本=”1.1“><defs id=“FooDefs”><linearGradient id=“MyGradient”x1=“0%”y1=“0%”x2=“100%”y2=“0”><停止偏移=“50%”停止颜色=“蓝色”/><停止偏移=“50%”停止颜色=“红色”/></linearGradient></defs><text y=“50%”id=“text”style=“font-size:72px；fill:url（#MyGradient）”></text></svg><h1>这不是解决方案X</h1>
http://codepen.io/nicbell/pen/jGcbq
我能得到的最接近：
$（函数）{$（'span'）.width（$（'span'）.wwidth（）/2）；$（'span:nth child（2）'）.css（'text-indent'，-$（'span'）.width（））；});正文{字体系列：arial；}跨度{显示：内联块；溢出：隐藏；}跨度：第n个子级（2）{颜色：红色；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><span>X</span><span>X</span>
演示：http://jsfiddle.net/9wxfY/2/
以下是仅使用一个跨度的版本：http://jsfiddle.net/9wxfY/4/
像这样的短文本怎么样？
如果你使用循环，用JavaScript重复字符，它甚至可以处理更长的文本。总之，结果是这样的：
邮政编码{位置：相对；显示：内联块；字体大小：60px；颜色：红色；}p.char:之前{位置：绝对；内容：属性（字符）；宽度：50%；溢出：隐藏；颜色：黑色；}<p class=“char”char=“S”>S</p><p class=“char”char=“t”>t</p><p class=“char”char=“a”>a</p><p class=“char”char=“c”>c</p><p class=“char”char=“k”>k</p><p class=“char”char=“o”>o</p><p class=“char”char=“v”>v</p><p class=“char”char=“e”>e</p><p class=“char”char=“r”>r</p><p class=“char”char=“f”>f</p><p class=“char”char=“l”>l</p><p class=“char”char=“o”>o</p><p class=“char”char=“w”>w</p>
如果你对此感兴趣，那么Lucas Bebber的Glitch是一个非常相似且超级酷的效果：
使用简单的SASS Mixin创建，例如
.example-one {
font-size: 100px;
@include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
}
更多详情请访问Chris Coyer的CSS技巧和Lucas Bebber的Codepen页面
是的，您可以只使用一个字符和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添加内容，这可能会导致可访问性——以及文本选择/剪切/粘贴问题。
