我要找的是：
一种为角色的一半设置样式的方法。（在这种情况下，一半的字母是透明的）
我目前搜索并尝试的内容（运气不佳）：
半个字符/字母的样式设置方法使用CSS或JavaScript设置字符的部分样式将CSS应用于50%的字符
下面是我试图获得的一个例子。
对此，是否存在CSS或JavaScript解决方案，还是我必须求助于图像？我宁愿不走图像路线，因为文本最终将动态生成。
更新：
既然很多人都问我为什么要塑造一个角色的一半，这就是为什么。我所在的城市最近花了25万美元为自己定义了一个新的“品牌”。这个标志就是他们想出的。许多人抱怨网站的简单和缺乏创造力，并继续这样做。我的目标是把这个网站当成一个笑话。输入“哈利法克斯”，你就会明白我的意思。
当前回答
这可以通过CSS:before选择器和内容属性值来实现。
减半，减半1{浮动：左侧；}减半，减半1{字体系列：arial；字体大小：300px；字号：粗体；宽度：200px；高度：300px；位置：相对；/*帮助保持内容价值*/溢出：隐藏；颜色：#000；}.halved:之前，.halved1:之前{宽度：50%；/*我们想展示多少*/溢出：隐藏；/*隐藏超出我们维度的内容*/内容：'X'；/*半字符*/高度：100%；位置：绝对；颜色：#28507D；}/*对于水平截止*/half-ed1:之前{宽度：100%；高度：55%；}<div class=“half-ed”>X</div><div class=“halved1”>X</div>
>>参见jsFiddle
其他回答
如果你对此感兴趣，那么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页面
这里是画布上的一个丑陋的实现。我尝试了这个解决方案，但结果比我预期的更糟，所以无论如何，它还是在这里。
$（“div”）.each（函数）{var CHARS=$（this）.text（）.split（“”）；$（this）.html（“”）；$.each（CHARS，函数（索引，字符）{var canvas=$（“<canvas/>”）.css（“宽度”，“40px”）.css（“高度”，“40px”）.get（0）；$（“div”）.append（画布）；var ctx=canvas.getContext（“2d”）；var gradient=ctx.createLinearGradient（0，0，130，0）；gradient.addColorStop（“0”，“蓝色”）；gradient.addColorStop（“0.5”，“蓝色”）；gradient.addColorStop（“0.51”，“红色”）；gradient.addColorStop（“1.0”，“红色”）；ctx.font=“130pt Calibri”；ctx.fillStyle=渐变；ctx.fillText（字符，10，130）；});});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div>示例文本</div>
我刚刚完成了插件的开发，每个人都可以使用它！希望你会喜欢。
在GitHub上查看项目-查看项目网站。（这样可以查看所有拆分样式）
用法
首先，确保包含jQuery库。获取最新jQuery版本的最佳方法是使用以下内容更新head标记：
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
下载文件后，确保将其包含在项目中：
<link rel="stylesheet" type="text/css" href="css/splitchar.css">
<script type="text/javascript" src="js/splitchar.js"></script>
加成
您所要做的就是为包装文本的元素添加splitchar类，然后添加所需的样式。例如
<h1 class="splitchar horizontal">Splitchar</h1>
完成所有这些之后，只需确保在文档就绪文件中调用jQuery函数，如下所示：
$(".splitchar").splitchar();
自定义
为了使文本看起来完全符合您的要求，您所要做的就是像这样应用您的设计：
.horizontal { /* Base CSS - e.g font-size */ }
.horizontal:before { /* CSS for the left half */ }
.horizontal:after { /* CSS for the right half */ }
就是这样！现在您已经设置了Splitchar插件。有关它的更多信息，请访问http://razvanbalosin.com/Splitchar.js/.
我刚刚玩了@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>
是的，您可以只使用一个字符和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添加内容，这可能会导致可访问性——以及文本选择/剪切/粘贴问题。
