我要找的是:

一种为角色的一半设置样式的方法。(在这种情况下,一半的字母是透明的)

我目前搜索并尝试的内容(运气不佳):

半个字符/字母的样式设置方法使用CSS或JavaScript设置字符的部分样式将CSS应用于50%的字符

下面是我试图获得的一个例子。

对此,是否存在CSS或JavaScript解决方案,还是我必须求助于图像?我宁愿不走图像路线,因为文本最终将动态生成。


更新:

既然很多人都问我为什么要塑造一个角色的一半,这就是为什么。我所在的城市最近花了25万美元为自己定义了一个新的“品牌”。这个标志就是他们想出的。许多人抱怨网站的简单和缺乏创造力,并继续这样做。我的目标是把这个网站当成一个笑话。输入“哈利法克斯”,你就会明白我的意思。


当前回答

是的,您可以只使用一个字符和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添加内容,这可能会导致可访问性——以及文本选择/剪切/粘贴问题。

其他回答

有限的CSS和jQuery解决方案

我不知道这个解决方案有多优雅,但它将所有事情都削减了一半:http://jsfiddle.net/9wxfY/11/

否则,我为您创建了一个很好的解决方案。。。您需要做的就是为HTML设置以下内容:

请查看截至2016年6月13日的最新且准确的编辑:http://jsfiddle.net/9wxfY/43/

至于CSS,它非常有限。。。您只需将其应用于:第n个孩子(偶数)

$(函数){var$hc=$('.half color');var str=$hc.text();$hc.html(“”);变量i=0;var字符;var dupText;而(i<str.length){chars=str[i];如果(chars==“”)chars=“”;dupText=“<span>”+字符+“</span>”;var firstHalf=$(dupText);var secondHalf=$(dupText);$hc.append(前半部分)$hc.append(secondHalf)var width=firstHalf.width()/2;firstHalf.width(宽度);secondHalf.css('text-indent',-width);i++;}});半色跨度{字体大小:2em;显示:内联块;溢出:隐藏;}半色跨度:第n个子级(偶数){颜色:红色;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script>这是一个句子</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/.

如果您愿意,也可以使用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

另一种仅使用CSS的解决方案(如果您不想编写特定于字母的CSS,则需要数据属性)。这一款更全面(已测试IE 9/10、Chrome最新版本和FF最新版本)

跨度{位置:相对;颜色:rgba(50,50200,0.5);}跨度:之前{content:attr(数据字符);位置:绝对;宽度:50%;溢出:隐藏;颜色:rgb(50,50200);}<span data char=“X”>X</span>

如果你对此感兴趣,那么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页面