我要找的是:

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

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

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

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

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


更新:

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


当前回答

您可以使用以下代码。在此示例中,我使用了h1标记,并添加了一个属性数据title text=“Display text”,它将在h1标记文本元素上显示不同颜色的文本,这会产生如下示例所示的半彩色文本效果

正文{文本对齐:居中;边距:0;}h1小时{颜色:#111;字体系列:arial;位置:相对;字体系列:“Oswald”,无衬线;显示:内联块;字体大小:2.5em;}h1::之后{content:attr(数据标题文本);颜色:#e554e;位置:绝对;左:0;顶部:0;剪辑:矩形(0,1000px,30px,0);}<h1 data title text=“显示文本”>显示文本</h1>

其他回答

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

我能得到的最接近:

$(函数){$('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/

我刚刚玩了@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>

我刚刚完成了插件的开发,每个人都可以使用它!希望你会喜欢。

在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/.

所有解决方案都是通过拆分字母并将其包装在<span>中来实现的。我们不必将字母分成两种情况:

如果字体是单空格。如果使用垂直布局。

第二部分{字体大小:80px;字号:粗体;颜色:透明;填充:0;边距:0;背景:线性梯度(90度,rgb(34,67,143)0%50%,#409FBF 50%);背景剪辑:文本;-webkit背景剪辑:文本;}一{字体系列:'Nova Mono';背景重复:repeat-x;背景大小:45px;}.2个{字体系列:'Gideon Roman';写入模式:垂直lr;文本方向:直立;字母间距:-35px;高度:500px;}<!-- 获取字体--><link rel=“preconnect”href=“https://fonts.googleapis.com"><link rel=“preconnect”href=“https://fonts.gstatic.com“交叉原点><link href=“https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap“rel=”stylesheet“><link href=“https://fonts.googleapis.com/css2?family=Gideon+Roman&display=swap“rel=”stylesheet“><div id=“one”class=“one”>X-RAY冬季</div><div class=“two”>最小</div>

字体不可用时的预期输出:

我知道背景剪辑和渐变的使用已经在其他答案中得到了证明,只不过是在不需要拆分字母的情况下。