我要找的是：
一种为角色的一半设置样式的方法。（在这种情况下，一半的字母是透明的）
我目前搜索并尝试的内容（运气不佳）：
半个字符/字母的样式设置方法使用CSS或JavaScript设置字符的部分样式将CSS应用于50%的字符
下面是我试图获得的一个例子。
对此，是否存在CSS或JavaScript解决方案，还是我必须求助于图像？我宁愿不走图像路线，因为文本最终将动态生成。
更新：
既然很多人都问我为什么要塑造一个角色的一半，这就是为什么。我所在的城市最近花了25万美元为自己定义了一个新的“品牌”。这个标志就是他们想出的。许多人抱怨网站的简单和缺乏创造力，并继续这样做。我的目标是把这个网站当成一个笑话。输入“哈利法克斯”，你就会明白我的意思。
当前回答
像这样的短文本怎么样？
如果你使用循环，用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>
其他回答
我刚刚玩了@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>
.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/
你可以把这段代码塞进各种有趣的事情中——这只是我和同事昨晚想出的一个实现。
像这样的短文本怎么样？
如果你使用循环，用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>
另一种仅使用CSS的解决方案（如果您不想编写特定于字母的CSS，则需要数据属性）。这一款更全面（已测试IE 9/10、Chrome最新版本和FF最新版本）
跨度{位置：相对；颜色：rgba（50,50200,0.5）；}跨度：之前{content:attr（数据字符）；位置：绝对；宽度：50%；溢出：隐藏；颜色：rgb（50,50200）；}<span data char=“X”>X</span>
我刚刚完成了插件的开发，每个人都可以使用它！希望你会喜欢。
在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/.
