我要找的是：
一种为角色的一半设置样式的方法。（在这种情况下，一半的字母是透明的）
我目前搜索并尝试的内容（运气不佳）：
半个字符/字母的样式设置方法使用CSS或JavaScript设置字符的部分样式将CSS应用于50%的字符
下面是我试图获得的一个例子。
对此，是否存在CSS或JavaScript解决方案，还是我必须求助于图像？我宁愿不走图像路线，因为文本最终将动态生成。
更新：
既然很多人都问我为什么要塑造一个角色的一半，这就是为什么。我所在的城市最近花了25万美元为自己定义了一个新的“品牌”。这个标志就是他们想出的。许多人抱怨网站的简单和缺乏创造力，并继续这样做。我的目标是把这个网站当成一个笑话。输入“哈利法克斯”，你就会明白我的意思。
当前回答
我能得到的最接近：
$（函数）{$（'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>
如果您愿意，也可以使用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
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);
}
我刚刚完成了插件的开发，每个人都可以使用它！希望你会喜欢。
在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/.
FWIW，这是我对仅使用CSS的看法：http://codepen.io/ricardozea/pen/uFbts/
几个注意事项：
我这样做的主要原因是为了测试自己，看看我是否能够完成一半角色的造型，同时为OP提供一个有意义的答案。我知道，这不是一个理想的或最具扩展性的解决方案，这里的人提出的解决方案对于“现实世界”场景要好得多。我创建的CSS代码是基于我脑海中的第一个想法和我自己解决这个问题的方法。我的解决方案仅适用于对称字符，如X、A、O、M。**它不适用于非对称字符，例如B、C、F、K或小写字母。**然而，这种方法用不对称的字符创造了非常有趣的“形状”。尝试将CSS中的X改为K或小写字母，如h或p：）
HTML
<span class="half-letter"></span>
SCSS
.half-character {
display: inline-block;
font: bold 350px/.8 Arial;
position: relative;
&:before, &:after {
content: 'X'; //Change character here
display: inline-block;
width: 50%;
overflow: hidden;
color: #7db9e8;
}
&:after {
position: absolute;
top: 0;
left: 50%;
color: #1e5799;
transform: rotateY(-180deg);
}
}
