可以将CSS应用于半个字符吗？

Question

我要找的是：

设计一款的方法一半一个角色。（在这种情况下，一半的字母是透明的）

我当前搜索和尝试的内容（运气不佳）：

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

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

是否存在CSS或JavaScript解决方案，或者我必须求助于图像？我宁愿不走图像路线，因为这个文本最终将被动态生成。

Answer 1

现在在GitHub上作为插件！

请随意分叉并改进。

演示|下载Zip|Half-Style.com网站（重定向至GitHub）

---

• 纯CSS对于单个字符
• 用于跨文本或多个字符自动化的JavaScript
• 为盲人或盲人的屏幕阅读器保留文本辅助功能受损

第1部分：基本解决方案

演示： http://jsfiddle.net/arbel/pd9yB/1694/

---

这适用于任何动态文本或单个字符，并且都是自动化的。你所需要做的就是在目标文本上添加一个类，剩下的就处理好了。

此外，还为盲人或视力受损的屏幕阅读器保留了原始文本的可访问性。

单个字符的解释：

纯CSS。你只需要申请.半样式类设置为包含要设置半样式的字符的每个元素。

对于每个包含字符的span元素，您可以创建一个数据属性，例如在这里data-content=“X”和关于伪元素的使用内容：attr（数据内容）；所以.helf样式：之前类将是动态的，您不需要为每个实例硬编码它。

任何文本的解释：

只需添加文本到半样式类设置为包含文本的元素。

---

//自动模式的jQueryjQuery（函数（$）{var文本，字符，$el，i，输出；//遍历所有类事件$（'.textToHalfStyle'）.each（函数（idx，el）{$el=$（el）；text=$el.text（）；chars=text.split（''）；//设置屏幕阅读器文本$el.html（'<span style=“position:absolute！important；clip:rect（1px 1px 1 px 1像素）；clip:rect（1像素，1像素，1px，1像素））；“>'+text+'</span>'）；//重置附加输出输出=“”；//遍历文本中的所有字符对于（i=0；i<字符长度；i++）{//为每个字符创建一个样式化元素并附加到容器output+='<span aria hidden=“true”class=“halfStyle”数据内容=“'+chars[i]+'”>'+chars[i]+'</span>'；}//只写入DOM一次$el.append（输出）；});});

.半样式{位置：相对；显示：嵌入式块；字体大小：80px；/*或者任何字体大小都可以*/颜色：黑色；/*或透明，任何颜色*/溢出：隐藏；空白：pre；/*防止空间倒塌*/}.helf样式：之前{显示：块；z指数：1；位置：绝对；顶部：0；左：0；宽度：50%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；颜色：#f00；}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><p>单个字符：</p><span class=“halfStyle”data-content=“X”>X</span>Y</span><span class=“halfStyle”data-content=“Z”>Z</span><span class=“halfStyle”数据内容=“A”>A</span><小时/><p>自动化：</p>请选择半样式</span>

(JSFiddle演示)

---

第2部分：高级解决方案-独立的左右部分

使用此解决方案，您可以分别和独立地设置左侧和右侧零件的样式.

一切都是一样的，只有更高级的CSS才有魔力。

jQuery（函数（$）{var文本，字符，$el，i，输出；//遍历所有类事件$（'.textToHalfStyle'）.each（函数（idx，el）{$el=$（el）；text=$el.text（）；chars=text.split（''）；//设置屏幕阅读器文本$el.html（'<span style=“position:absolute！important；clip:rect（1px 1px 1 px 1像素）；clip:rect（1像素，1像素，1px，1像素））；“>'+text+'</span>'）；//重置附加输出输出=“”；//遍历文本中的所有字符对于（i=0；i<字符长度；i++）{//为每个字符创建一个样式元素并附加到容器输出+='<span aria-hidden=“true”class=“halfStyle”data-content=“'+chars[i]+'”>'+chars[i]+'</span>'；}//只写入DOM一次$el.append（输出）；});});

.半样式{位置：相对；显示：嵌入式块；字体大小：80px；/*或者任何字体大小都可以*/颜色：透明；/*隐藏基本角色*/溢出：隐藏；空白：pre；/*防止空间倒塌*/}.halfStyle:在{/*创建左侧零件之前*/显示：块；z指数：1；位置：绝对；顶部：0；宽度：50%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；指针事件：无；/*所以基本字符可以通过鼠标选择*/颜色：#f00；/*用于演示目的*/文本阴影：2px-2px 0px#af0；/*用于演示目的*/}.halfStyle:在{/*创建正确的部分之后*/显示：块；方向：rtl；/*非常重要，将使宽度从右侧开始*/位置：绝对；z指数：2；顶部：0；左：50%；宽度：50%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；指针事件：无；/*所以基本字符可以通过鼠标选择*/颜色：#000；/*用于演示目的*/文本阴影：2px 2px 0px#0af；/*用于演示目的*/}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><p>单个字符：</p><span class=“halfStyle”data-content=“X”>X</span>Y</span><span class=“halfStyle”data-content=“Z”>Z</span><span class=“halfStyle”数据内容=“A”>A</span><小时/><p>自动化：</p>请选择半样式</span>

(JSFiddle演示)

---

---

第3部分：混合匹配和改进

现在我们知道了什么是可能的，让我们创建一些变体。

---

-水平半部分

• 无文本阴影：

  

• 每个半部分单独使用文本阴影的可能性：

  

//自动模式的jQueryjQuery（函数（$）{var文本，字符，$el，i，输出；//遍历所有类事件$（'.textToHalfStyle'）.each（函数（idx，el）{$el=$（el）；text=$el.text（）；chars=text.split（''）；//设置屏幕阅读器文本$el.html（'<span style=“position:absolute！important；clip:rect（1px 1px 1 px 1像素）；clip:rect（1像素，1像素，1px，1像素））；“>'+text+'</span>'）；//重置附加输出输出=“”；//遍历文本中的所有字符对于（i=0；i<字符长度；i++）{//为每个字符创建一个样式化元素并附加到容器输出+='<span aria-hidden=“true”class=“halfStyle”data-content=“'+chars[i]+'”>'+chars[i]+'</span>'；}//只写入DOM一次$el.append（输出）；});});

.半样式{位置：相对；显示：嵌入式块；字体大小：80px；/*或者任何字体大小都可以*/颜色：透明；/*隐藏基本角色*/溢出：隐藏；空白：pre；/*防止空间倒塌*/}.halfStyle:在{/*创建顶部之前*/显示：块；z指数：2；位置：绝对；顶部：0；高度：50%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；指针事件：无；/*所以基本字符可以通过鼠标选择*/颜色：#f00；/*用于演示目的*/文本阴影：2px-2px 0px#af0；/*用于演示目的*/}.halfStyle:在{/*创建底部零件之后*/显示：块；位置：绝对；z指数：1；顶部：0；高度：100%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；指针事件：无；/*所以基本字符可以通过鼠标选择*/颜色：#000；/*用于演示目的*/文本阴影：2px 2px 0px#0af；/*用于演示目的*/}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><p>单个字符：</p><span class=“halfStyle”data-content=“X”>X</span>Y</span><span class=“halfStyle”data-content=“Z”>Z</span><span class=“halfStyle”data-content=“A”>A</span><小时/><p>自动化：</p>请选择半样式</span>

(JSFiddle演示)

---

---

-垂直1/3部分

• 无文本阴影：

  

• 每个1/3部分单独使用文本阴影的可能性：

  

//自动模式的jQueryjQuery（函数（$）{var文本，字符，$el，i，输出；//遍历所有类事件$（'.textToHalfStyle'）.each（函数（idx，el）{$el=$（el）；text=$el.text（）；chars=文本拆分（''）；//设置屏幕阅读器文本$el.html（'<span style=“position:absolute！important；clip:rect（1px 1px 1 px 1像素）；clip:rect（1像素，1像素，1px，1像素））；“>'+text+'</span>'）；//重置附加输出输出=“”；//遍历文本中的所有字符对于（i=0；i<字符长度；i++）{//为每个字符创建一个样式化元素并附加到容器输出+='<span aria-hidden=“true”class=“halfStyle”data-content=“'+chars[i]+'”>'+chars[i]+'</span>'；}//只写入DOM一次$el.append（输出）；});});

.halfStyle{/*基本字符和右侧的1/3*/位置：相对；显示：嵌入式块；字体大小：80px；/*或者任何字体大小都可以*/颜色：透明；/*隐藏基本角色*/溢出：隐藏；空白：pre；/*防止空间倒塌*/颜色：#f0f；/*用于演示目的*/文本阴影：2px 2px 0px#0af；/*用于演示目的*/}.halfStyle:在{/*创建左侧1/3之前*/显示：块；z指数：2；位置：绝对；顶部：0；宽度：33.33%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；指针事件：无；/*所以基本字符可以通过鼠标选择*/颜色：#f00；/*用于演示目的*/文本阴影：2px-2px 0px#af0；/*用于演示目的*/}.halfStyle:在{/*之后创建中间的1/3*/显示：块；z指数：1；位置：绝对；顶部：0；宽度：66.66%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；指针事件：无；/*所以基本字符可以通过鼠标选择*/颜色：#000；/*用于演示目的*/文本阴影：2px 2px 0px#af0；/*用于演示目的*/}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><p>单个字符：</p><span class=“halfStyle”data-content=“X”>X</span>Y</span><span class=“halfStyle”data-content=“Z”>Z</span><span class=“halfStyle”data-content=“A”>A</span><小时/><p>自动化：</p>请选择半样式</span>

(JSFiddle演示)

---

---

-水平1/3部分

• 无文本阴影：

  

• 每个1/3部分单独使用文本阴影的可能性：

  

//自动模式的jQueryjQuery（函数（$）{var文本，字符，$el，i，输出；//遍历所有类事件$（'.textToHalfStyle'）.each（函数（idx，el）{$el=$（el）；text=$el.text（）；chars=text.split（''）；//设置屏幕阅读器文本$el.html（'<span style=“position:absolute！important；clip:rect（1px 1px 1 px 1像素）；clip:rect（1像素，1像素，1px，1像素））；“>'+text+'</span>'）；//重置附加输出输出=“”；//遍历文本中的所有字符对于（i=0；i<字符长度；i++）{//为每个字符创建一个样式化元素并附加到容器输出+='<span aria-hidden=“true”class=“halfStyle”data-content=“'+chars[i]+'”>'+chars[i]+'</span>'；}//只写入DOM一次$el.append（输出）；});});

.halfStyle{/*基本字符和底部1/3*/位置：相对；显示：嵌入式块；字体大小：80px；/*或者任何字体大小都可以*/颜色：透明；溢出：隐藏；空白：pre；/*防止空间倒塌*/颜色：#f0f；文本阴影：2px 2px 0px#0af；/*用于演示目的*/}.halfStyle:在{/*创建前1/3*/显示：块；z指数：2；位置：绝对；顶部：0；身高：33.33%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；指针事件：无；/*所以基本字符可以通过鼠标选择*/颜色：#f00；/*用于演示目的*/文本阴影：2px-2px 0px#fa0；/*用于演示目的*/}.halfStyle:在{/*之后创建中间的1/3*/显示：块；位置：绝对；z指数：1；顶部：0；身高：66.66%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；指针事件：无；/*所以基本字符可以通过鼠标选择*/颜色：#000；/*用于演示目的*/文本阴影：2px 2px 0px#af0；/*用于演示目的*/}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><p>单个字符：</p><span class=“halfStyle”data-content=“X”>X</span>Y</span><span class=“halfStyle”data-content=“Z”>Z</span><span class=“halfStyle”data-content=“A”>A</span><小时/><p>自动化：</p><span class=“textToHalfStyle”>请选择一半样式</span>

(JSFiddle演示)

---

---

-中场风格改进@KevinGranger

//自动模式的jQueryjQuery（函数（$）{var文本，字符，$el，i，输出；//遍历所有类事件$（'.textToHalfStyle'）.each（函数（idx，el）{$el=$（el）；text=$el.text（）；chars=text.split（''）；//设置屏幕阅读器文本$el.html（'<span style=“position:absolute！important；clip:rect（1px 1px 1 px 1像素）；clip:rect（1像素，1像素，1px，1像素））；“>'+text+'</span>'）；//重置附加输出输出=“”；//遍历文本中的所有字符对于（i=0；i<字符长度；i++）{//为每个字符创建一个样式元素并附加到容器输出+='<span aria-hidden=“true”class=“halfStyle”data-content=“'+chars[i]+'”>'+chars[i]+'</span>'；}//只写入DOM一次$el.append（输出）；});});

车身{背景色：黑色；}.text到半样式{显示：块；边距：200px 0 0；文本对齐：居中；}.半样式{font-family:'Libre Baskerville'，衬线；位置：相对；显示：嵌入式块；宽度：1；字体大小：70px；颜色：黑色；溢出：隐藏；空白：前置；文本阴影：1px 2px 0白色；}.helf样式：之前{显示：块；z指数：1；位置：绝对；顶部：0；宽度：50%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；颜色：白色；}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><p>单个字符：</p><span class=“halfStyle”data-content=“X”>X</span>Y</span><span class=“halfStyle”data-content=“Z”>Z</span><span class=“halfStyle”data-content=“A”>A</span><小时/><p>自动化：</p>请选择半样式</span>

(JSFiddle演示)

---

---

-HalfStyle的PeelingStyle改进@萨姆特雷梅因

//自动模式的jQueryjQuery（函数（$）{var文本，字符，$el，i，输出；//遍历所有类事件$（'.textToHalfStyle'）.each（函数（idx，el）{$el=$（el）；text=$el.text（）；chars=text.split（''）；//设置屏幕阅读器文本$el.html（'<span style=“position:absolute！important；clip:rect（1px 1px 1 px 1像素）；clip:rect（1像素，1像素，1px，1像素））；“>'+text+'</span>'）；//重置附加输出输出=“”；//遍历文本中的所有字符对于（i=0；i<字符长度；i++）{//为每个字符创建一个样式化元素并附加到容器输出+='<span aria-hidden=“true”class=“halfStyle”data-content=“'+chars[i]+'”>'+chars[i]+'</span>'；}//只写入DOM一次$el.append（输出）；});});

.半样式{位置：相对；显示：嵌入式块；字体大小：68px；颜色：rgba（0、0、0和0.8）；溢出：隐藏；空白：前置；变换：旋转（4度）；文本阴影：2px 1px 3px rgba（0、0、0和0.3）；}.halfStyle:在{/*创建左侧零件之前*/显示：块；z指数：1；位置：绝对；顶部：-0.5px；左：-3px；宽度：100%；内容：attr（数据内容）；溢出：隐藏；指针-事件：无；颜色：#FFF；变换：旋转（-4度）；文本阴影：0px 0px 1px#000；}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><p>单个字符：</p><span class=“halfStyle”数据内容=“X”>X</span>Y</span><span class=“halfStyle”数据内容=“Z”>Z</span><span class=“halfStyle”data-content=“A”>A</span><小时/><p>自动化：</p>请选择半样式</span>

(JSFiddle演示和上的samtremaine.co.uk公司)

---

---

第4部分：准备生产

可以在同一页面上的所需元素上使用自定义的不同半样式样式集。您可以定义多个样式集，并告诉插件使用哪一个。

插件使用数据属性data-halfstyle=“[-CustomClassName-]”在目标上.text到半样式元素并自动进行所有必要的更改。

因此，只需在包含文本的元素上添加文本到半样式类和数据属性data-halfstyle=“[-CustomClassName-]”插件将完成剩下的工作。

此外，CSS样式集的类定义与[-自定义类名-]上面提到的部分，并链接到.半样式，所以我们会.hlfStyle.[-CustomClassName-]

jQuery（函数（$）{var半样式文本，半样式字符，$halfstyle_el，半样式i，半样式输出，半样式样式；//遍历所有类事件$（'.textToHalfStyle'）.each（函数（idx，halfstyle_el）{$halfstyle_el=$（半样式_el）；halfstyle_style=$halfstyle_el.data（'halfstyle'）||'hs-base'；halfstyle_text=$halfstyle_el.text（）；halfstyle_chars=halfstyle_text.split（''）；//设置屏幕阅读器文本$halfstyle_el.html（'<span style=“position:absolute！important；clip:rect（1px 1px 1 px 1像素）；clip:rect（1像素，1像素，1px，1像素））；“>'+halfstyle_text+'</span>'）；//重置输出以进行追加halfstyle_output=“”；//遍历文本中的所有字符对于（halfstyle_i=0；halfstyle_ i<halfstyle_chars.length；halftyle_i++）{//为每个字符创建一个样式化元素并附加到容器halfstyle_output+='<span aria-hidden=“true”class=“halfstyle'+halfstyle_style+'”data-content=“'+halstyle_chars[halfstyleui]+'”>'+hafstyle_chars[halftyle_i]+'</span>'；}//只写入DOM一次$halfstyle_el.append（半样式_输出）；});});

/*启动半样式hs-base*/.hlf样式.hsbase{位置：相对；显示：嵌入式块；字体大小：80px；/*或者任何字体大小都可以*/溢出：隐藏；空白：pre；/*防止空间坍塌*/颜色：#000；/*用于演示目的*/}.hlf样式.hs底部：之前{显示：块；z指数：1；位置：绝对；顶部：0；宽度：50%；内容：attr（数据内容）；/*伪元素的动态内容*/指针事件：无；/*所以基本字符可以通过鼠标选择*/溢出：隐藏；颜色：#f00；/*用于演示目的*/}/*端半式hs基*//*开始半场式hs-horizontal第三*/.hlfStyle.hs-horizontal-第三个{/*基本字符和底部的1/3*/位置：相对；显示：嵌入式块；字体大小：80px；/*或者任何字体大小都可以*/颜色：透明；溢出：隐藏；空白：pre；/*防止空间倒塌*/颜色：#f0f；文本阴影：2px 2px 0px#0af；/*用于演示目的*/}.havlStyle.hs-horizontal-thrend:在{/*创建前1/3*/显示：块；z指数：2；位置：绝对；顶部：0；身高：33.33%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；指针事件：无；/*所以基本字符可以通过鼠标选择*/颜色：#f00；/*用于演示目的*/文本阴影：2px-2px 0px#fa0；/*用于演示目的*/}.halfStyle.hs-horizontal-thrend:在{/*之后创建中间1/3*/显示：块；位置：绝对；z指数：1；顶部：0；身高：66.66%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；指针事件：无；/*所以基本字符可以通过鼠标选择*/颜色：#000；/*用于演示目的*/文本阴影：2px 2px 0px#af0；/*用于演示目的*/}/*结束半场风格hs-horizontal-第三*//*由用户SamTremaine在Stackoverflow.com上启动half-style hs-PeelingStyle*/.hlf样式.hs-触摸样式{位置：相对；显示：嵌入式块；字体大小：68px；颜色：rgba（0、0、0和0.8）；溢出：隐藏；空白：前置；变换：旋转（4度）；文本阴影：2px 1px 3px rgba（0、0、0和0.3）；}.halfStyle.hs-PeelingStyle:在{/*创建左侧零件之前*/显示：块；z指数：1；位置：绝对；顶部：-0.5px；左：-3px；宽度：100%；内容：attr（数据内容）；溢出：隐藏；指针-事件：无；颜色：#FFF；变换：旋转（-4度）；文本阴影：0px 0px 1px#000；}/*结束半样式hs-PeelingStyle*//*StackOverflow.com上的用户KevinGranger启动半身风格hs-KevinGranger*/.text到半样式.hs-KevinGranger{显示：块；边距：200px 0 0 0；文本对齐：居中；}.hlf样式.hs-KevinGranger{字体家族：“Libre Baskerville”，衬线字体；位置：相对；显示：嵌入式块；宽度：1；字体大小：70px；颜色：黑色；溢出：隐藏；空白：前置；文本阴影：1px 2px 0白色；}.hlfStyle.hs-KevinGranger:之前{显示：块；z指数：1；位置：绝对；顶部：0；宽度：50%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；颜色：白色；}/*末端半身式hs-凯文·格兰杰

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><p>请选择半样式</span></p><p>请选择半样式</span></p><p>请选择Half-style</span></p><p style=“background-color:#000；”>请选择半样式</span></p>

(JSFiddle演示)

Answer 2

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

在上查看项目github-查看项目网站.（这样您可以看到所有拆分样式）

用法

首先，确保您拥有jQuery（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/splicchar.js”></script>

标记

你所要做的就是分配课程分割字符，然后为环绕文本的元素指定所需的样式。例如

splitchar</h1>

完成所有操作后，只需确保在文档就绪文件中调用jQuery函数，如下所示：

$（“.splitchar”）.splitchar（）；

自定义

为了使文本看起来完全符合您的要求，您所要做的就是这样应用您的设计：

.horizontal{/*基本CSS-例如font-size*/}.horizontal：位于左半部的{/*CSS之前*/}.horizontal：右半部的{/*CSS后面*/}

就这样！现在你有了Splitchar公司插件全部设置。有关它的更多信息，请访问http://razvanbalosin.com/Splitchar.js/.

Answer 3

是的，您只能使用一个字符和CSS完成此操作：

http://jsbin.com/rexoyice/1/

小时1{显示：嵌入式块；边距：0；/*用于演示片段*/线高：1em；/*用于演示片段*/字体系列：helvetica，arial，sans-serif；font-weight：粗体；字体大小：300px；背景：线性渐变（向右，#7db9e8 50%，#1e5799 50%）；背景剪辑：文本；-webkit-text-fill-color:透明；}

<h1>X（X）</h1>

从视觉上看，所有使用两个字符的示例（无论是通过JS、CSS伪元素还是仅HTML）看起来都很好，但请注意，这些示例都向DOM添加了内容，这可能会导致可访问性，以及文本选择/剪切/粘贴问题。

Answer 4

---

JSFiddle演示

我们将只使用CSS伪选择器！

此技术将处理动态生成的内容以及不同的字体大小和宽度。

HTML格式：

两个比一个好</div（分频）>

CSS（客服代表）：

.分色>span{空白：前置行；位置：相对；颜色：#409FBF；}.split-color>span:之前{内容：attr（数据内容）；指针事件：无；/*防止事件以伪元素为目标*/位置：绝对；溢出：隐藏；颜色：#264A73；宽度：50%；z指数：1；}

要包装动态生成的字符串，可以使用如下函数：

//将每个字母包装在span标记中并返回HTML字符串//可用于替换原始文本的函数wrapString（str）{var输出=[]；str.split（“”）.forEach（函数（字母）{var wrapper=document.createElement（'span'）；wrapper.dataset.content=wrapper.innerHTML=字母；output.push（wrapper.outerHTML）；});返回output.join（“”）；}//用分色文本替换原始文本window.onload=函数（）{var el=document.querySelector（'.split-color'），txt=el.innerHTML；el.innerHTML=包装字符串（txt）；}

Answer 5

如果你对此感兴趣，那么Lucas Bebber的Glitch是一个非常相似且超级酷的效果：

使用简单的SASS Mixin创建，例如

.example-one（示例）{字体大小：100px；@包括textGlitch（“示例一”，17，白色，黑色，红色，蓝色，450，115）；}

更多详细信息，请访问Chris Coyer的CSS技巧和Lucas Bebber的Codepen页面

Answer 6

这里是画布中一个丑陋的实现。我尝试了这个解决方案，但结果比我预期的要差，所以不管怎么说，就是这样。

$（“div”）.each（function（）{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”，“blue”）；gradient.addColorStop（“0.5”，“蓝色”）；gradient.addColorStop（“0.51”，“red”）；gradient.addColorStop（“1.0”，“red”）；ctx.font='130pt Calibri'；ctx.fillStyle=渐变；ctx.fillText（char，10130）；});});

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div>示例文本</div>

Answer 7

我能得到的最接近的：

$（函数（）{$（'span'）.width（$（'span'）.width（）/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>

演示：http://jsfiddle.net/9wxfY/2/

以下是仅使用一个跨度的版本：http://jsfiddle.net/9wxfY/4/

Answer 8

我只是在玩@Arbel的解决方案：

var textToHalfStyle=$（'.textToHalfStyle'）.text（）；var textToHalfStyleChars=textToHalfStyle.split（''）；$（'.textToHalfStyle'）.html（''）；$.each（textToHalfStyleChars，函数（i，v）{$（'.textToHalfStyle'）.append（'<span class=“halfStyle”data-content=“'+v+'”>'+v+'</span>'）；});

车身{背景色：黑色；}.text到半样式{显示：块；边距：200px 0 0；文本对齐：居中；}.半样式{font-family:'Libre Baskerville'，衬线；位置：相对；显示：嵌入式块；宽度：1；字体大小：70px；颜色：黑色；溢出：隐藏；空白：前置；文本阴影：1px 2px 0白色；}.helf样式：之前{显示：块；z指数：1；位置：绝对；顶部：0；宽度：50%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；颜色：白色；}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js“></script>杰基尔博士和M.Hide</span>

Answer 9

另一个仅支持CSS的解决方案（如果您不想编写特定于字母的CSS，则需要数据属性）。这一款更全面（IE 9/10测试版、Chrome最新版本和FF最新版本）

跨度{位置：相对；颜色：rgba（50,5020,0.5）；}span：之前{内容：attr（data-char）；位置：绝对；宽度：50%；溢出：隐藏；颜色：rgb（50,50200）；}

<span data-char=“X”>X</span>

Answer 10

有限的CSS和jQuery解决方案

我不确定这个解决方案有多优雅，但它将一切都一分为二：http://jsfiddle.net/9wxfY/11/

否则，我已经为您创建了一个很好的解决方案。。。您只需为HTML准备以下内容：

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

至于CSS，它是非常有限的。。。您只需将其应用于：nth-child（偶数）

$（函数（）{var$hc=$（'.shalf-color'）；var str=$hc.text（）；$hc.html（“”）；var i=0；var字符；var dupText；while（i<字符串长度）{chars=字符串[i]；if（chars==“”）chars=“”；dupText=“<span>”+字符+“</span>”；var firstHalf=$（dupText）；var secondHalf=$（dupText）；$hc.append（上半场）$hc.append（后半部分）var width=firstHalf.width（）/2；前半部宽度（宽度）；secondHalf.css（'text-indent'，-width）；i++；}});

.半色范围{字体大小：2em；显示：嵌入式块；溢出：隐藏；}.半色范围：第n个子（偶数）{颜色：红色；}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script>这是一个句子

Answer 11

一个很好的解决方案，利用背景-幻灯片：文本支持：http://jsfiddle.net/sandro_paganotti/wLkVt/

跨度{字体大小：100px；背景：线性渐变（向右，黑色，黑色50%，灰色50%，灰色）；背景剪辑：文本；-webkit-text-fill-color:透明；}

Answer 12

.holf样式{位置：相对；显示：嵌入式块；字体大小：68px；/*或者任何字体大小都可以*/颜色：rgba（0,0,0.8）；/*或透明，任何颜色*/溢出：隐藏；空白：pre；/*防止空间倒塌*/变换：旋转（4度）；-webkit转换：旋转（4度）；文本阴影：2px 1px 3px rgba（0,0,0.0.3）；}.helf样式：之前{显示：块；z指数：1；位置：绝对；顶部：-0.5px；左：-3px；宽度：100%；内容：attr（数据内容）；/*伪元素的动态内容*/溢出：隐藏；颜色：白色；变换：旋转（-4度）；-webkit-transform：旋转（-4度）；文本阴影：0 0 1px黑色；}

http://experial.samtremaine.co.uk/shalf-style网站/

你可以用撬棍把这段代码插入到各种有趣的事情中——这只是我和同事昨晚想出的一个实现。

Answer 13

对于较短的文本，像这样的东西怎么样？

如果您使用循环，用JavaScript重复字符，那么它甚至可以用于较长的文本。总之，结果是这样的：

p.char（p.char）{位置：相对；显示：嵌入式块；字体大小：60px；颜色：红色；}p.char：之前{位置：绝对；内容：attr（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>

Answer 14

FWIW，以下是我对仅使用CSS进行此操作的看法：http://codepen.io/ricardozea/pen/uFbts/

几个注意事项：

• 我这样做的主要原因是为了测试自己，看看我是否能够完成角色的一半造型，同时为OP提供一个有意义的答案。

• 我知道这不是一个理想的或最具扩展性的解决方案，这里的人提出的解决方案对于“现实世界”场景来说要好得多。

• 我创建的CSS代码是基于我脑海中的第一个想法和我自己解决问题的方法。

• 我的解决方案只适用于对称字符，如X、A、O、M。**它不适用于非对称字符，例如B、C、F、K或小写字母。

• **然而，这种方法使用不对称字符创建了非常有趣的“形状”。尝试将X更改为K或小写字母，如小时或a第页在CSS中：）

HTML格式

<span class=“半角字母”></span>

SCSS系统

.半字符{显示：嵌入式块；字体：bold 350px/.8宋体；位置：相对；&：之前，&：之后{内容：“X”//在此处更改字符显示：嵌入式块；宽度：50%；溢出：隐藏；颜色：#7db9e8；}&：之后{位置：绝对；顶部：0；左：50%；颜色：#1e5799；变换：旋转Y（-180度）；}}

Answer 15

这可以通过CSS实现：之前选择器和内容属性值.

一半，一半1{浮动：左；}一半，一半1{字体系列：arial；字体大小：300px；font-weight：粗体；宽度：200px；高度：300px；位置：相对；/*帮助将内容值保持在*/溢出：隐藏；颜色：#000；}半成品：之前，半成品1：之前{宽度：50%；/*我们想展示多少*/溢出：隐藏；/*隐藏超出我们维度的内容*/内容：'X'；/*半成品字符*/高度：100%；位置：绝对；颜色：#28507D；}/*对于水平切断*/.hlfed1:之前{宽度：100%；身高：55%；}

X</div>X</div>

>>在jsFiddle上查看

Answer 16

如果您愿意，也可以使用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<文本长度；i++）{var x=charStyle.cloneNode（）；x.textContent=文本[i]；svgTemplate.appendChild（x）；x.setAttribute（'x'，空格）；空格+=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%”stop-color=“blue”/><停止偏移=“50%”stop-color=“red”/></linear渐变></defs><text y=“50%”id=“text”style=“font-size:72px；填充：url（#MyGradient）”></text></svg><h1>这不是解决方案X</h1>

http://codepen.io/nicbell/pen/jGcbq

Answer 17

您可以使用以下代码。在这个例子中，我使用了小时1标记并添加属性data title text=“显示文本”将显示不同颜色的文本小时1标记文本元素，它可以产生半彩色文本，如下面的示例所示

车身{文本对齐：居中；边距：0；}小时1{颜色：#111；字体系列：arial；位置：相对；font-family:'Oswald'，sans-serif；显示：嵌入式块；字体大小：2.5em；}h1:：之后{内容：attr（data-title-text）；颜色：#e5554e；位置：绝对；左：0；顶部：0；剪辑：矩形（0，1000px，30px，0）；}

<h1 data-title-text=“Display text”>显示文本</h1>

Answer 18

只是为了历史的记录！

我在5-6年前为自己的工作想出了一个解决方案，即Gradext公司（纯javascript和纯css，无依赖性）。

技术解释是，您可以创建这样的元素：

<span>A类</span>

现在，如果你想在文本上创建渐变，你需要创建一些多层，每个层都是单独着色的，创建的光谱将说明渐变效果。

例如，看看这个单词洛伦姆内部<span>会引起水平梯度效应(查看示例):

<span data-i=“0”style=“color:rgb（153，51，34）；”>L</span><span data-i=“1”style=“color:rgb（154，52，35）；”>o</span><span data-i=“2”style=“color:rgb（155，53，36）；”>r</span><span data-i=“3”style=“color:rgb（156，55，38）；”>e</span><span data-i=“4”style=“color:rgb（157,56,39）；”>m</span>

你可以继续这样做很长的时间和很长的段落。

但是！

如果要创建垂直梯度对文本的影响？

然后还有另一个可能有用的解决方案。我将详细描述。

假设我们的第一个<span>再一次。但内容不应是单独的字母；内容应该是整个文本，现在我们要复制相同的内容<span>一次又一次（跨距数将定义渐变的质量，跨距越大，效果越好，但性能较差）。看看这个：

<span data-i=“6”style=“color:rgb（81，165，39）；overflow:hidden；height:11.2px；”>Lorem ipsum dolor sit amet，tincidunt ut laoreet dolore magna aliquam erat voluppat</span><span data-i=“7”style=“color:rgb（89，174，48）；overflow:hidden；height:12.8px；”>Lorem ipsum dolor sit amet，tincidunt ut laoreet dolore magna aliquam erat voluppat</span><span data-i=“8”style=“color:rgb（97，183，58）；overflow:hidden；height:14.4px；”>Lorem ipsum dolor sit amet，tincidunt ut laoreet dolore magna aliquam erat voluppat</span><span data-i=“9”style=“color:rgb（105，192，68）；overflow:hidden；height:16px；”>Lorem ipsum dolor sit amet，tincidunt ut laoreet dolore magna aliquam erat voluppat</span><span data-i=“10”style=“color:rgb（113，201，78）；overflow:hidden；height:17.6px；”>Lorem ipsum dolor sit amet，tincidunt ut laoreet dolore magna aliquam erat voluppat</span><span data-i=“11”style=“color:rgb（121，210，88）；overflow:hidden；height:19.2px；”>Lorem ipsum dolor sit amet，tincidunt ut laoreet dolore magna aliquam erat voluppat</span>

再一次，但是！

如果你想让这些渐变效果移动并从中创建动画，该怎么办？

嗯，还有另一种解决方案。你一定要检查一下动画：真甚至是.可悬停（）该方法将导致基于光标位置的渐变开始！（听起来很酷xD）

这就是我们如何在文本上创建渐变（线性或径向）。如果你喜欢这个想法或想了解更多，你应该查看提供的链接。

---

也许这不是最好的选择，也许不是最好的表现方式，但它会为创建令人兴奋和愉快的动画开辟一些空间，以激励其他人寻求更好的解决方案。

它将允许您在文本上使用渐变样式，甚至IE8也支持这种样式！

在这里你可以找到一个有效的现场演示原始存储库是在GitHub上也是如此，开源并准备获得一些更新（：D）

这是我第一次（是的，5年后，你已经听对了）在互联网上提到这个存储库，我对此感到兴奋！

---

[更新-2019年8月：]Github已移除github页面因为我来自伊朗！只有源代码可用在这里那些。。。

Answer 19

所有解决方案都是通过拆分字母并将其包装在<span>。我们不必在两种情况下分开字母：

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

div公司{字体大小：80px；font-weight：粗体；颜色：透明；填充：0；边距：0；背景：线性梯度（90度，rgb（34，67，143）0%50%，#409FBF 50%）；背景剪辑：文本；-webkit-background-clip:文本；}.一个{font-family:“Nova Mono”；背景重复：重复-x；背景尺寸：45px；}.2个{font-family：“吉迪恩·罗曼”；写入方式：vertical-lr；文本方向：垂直；字母间距：-35px；高度：500px；}

<!-- 获取字体--><link rel=“preconnect”href=“https://fonts.googleapis.com"><link rel=“预连接”href=“https://fonts.gstatic.com“交叉原点><link href=“https://fonts.googleapis.com/cs2？family=新星+Mono&display=swap“rel=”stylesheet“><link href=“https://fonts.googleapis.com/css2？family=Gideon+Roman&display=swap“rel=”stylesheet“>冬季X光Minty（米蒂）

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

我知道在其他答案中已经演示了背景剪贴和渐变的用法，只需在不需要拆分字母的情况下使用。

Answer 20

以下是一个仅适用于CSS的解决方案全文，而不仅仅是字符元素。

div公司{位置：相对；顶部：2em；高度：2em；文本转换：全宽；}div：之前，div：之后{内容：attr（数据内容）；位置：绝对；顶部：0；右：0；底部：0；左：0；}div：之后{颜色：红色；/*单个字符的掩码。通过重复此掩码，所有字符串都将被屏蔽*/-webkit-mask-image：线性渐变（向右，透明0，透明.5em，白色.5em和白色1em）；-webkit-mask-repeat:重复-x；/*向右重复口罩*/-webkit-mask大小：1em；/*单个字符的相对宽度*//*非供应商掩码设置*/掩模图像：线性梯度（向右，透明0，透明.5em，白色.5em，白色1em）；掩码重复：重复-x；口罩尺寸：1厘米；}/*演示目的*/input[name=“fontSize”]：类型第一：选中~div{字体大小：1em；}input[name=“fontSize”]：类型第一+输入：选中~div{字体大小：2em；}input[name=“fontSize”]：类型第一+输入+输入：选中~div{字体大小：3em；}

字体大小：<input type=“radio”name=“fontSize”value=“1em”><input type=“radio”name=“fontSize”value=“2em”选中><input type=“radio”name=“fontSize”value=“3em”><div data-content=“仅支持CSS的解决方案…”><div data-content=“在Firefox上试试！”></div>

这个想法是为每个字符应用一个水平CSS掩码，它隐藏了字符的前半部分[0-0.5em]，并显示了后半部分[0.5em-1em]。

遮罩的宽度为面具尺寸：1em匹配字符串中第一个字符的宽度。通过使用掩码重复：重复-x，相同的掩码应用于第二个、第三个字符等。

我认为使用字体单空间可以解决使用相同宽度的字母的问题，但我错了。相反，我通过使用文本转换：全宽不幸的是，我认为只有Firefox才支持。

相对单位的使用相对长度单位允许设计根据字体大小.

适用于所有浏览器的通用JavaScript解决方案

如果Firefox不是一个选项，那么使用此脚本进行救援。

它通过插入子元素来工作跨度对于每个字符。在每个跨度内，从字母的宽度[0%-50%]和[50%-100%]（即跨度元素的宽度）放置一个非重复的CSS掩码。

这样我们就不再限制使用相同宽度的字符。

常数dataElement=document.getElementById（“数据”），content=dataElement.textContent，zoom=函数（fontSize）{dataElement.style['font-size']=fontSize+'em'；};while（dataElement.firstChild）{dataElement.firstChild.remove（）}for（var i=0；i<内容长度；++i）{常数spanElem=document.createElement（'span'），ch=含量[i]；spanElem.setAttribute（'data-ch'，ch）；spanElem.appendChild（document.createTextNode（ch==''？'\u00A0'：ch））；data.appendChild（spanElem）；}

#数据{位置：相对；顶部：2em；高度：2em；字体大小：2em；}#数据跨度{显示：嵌入式块；位置：相对；颜色：透明；}#数据范围：之前，#数据范围：之后{内容：attr（data-ch）；显示：嵌入式块；位置：绝对；顶部：0；右：0；底部：0；左：0；文本对齐：居中；颜色：初始；}#数据范围：之后{颜色：红色；-webkit掩码图像：线性梯度（向右，透明0，透明50%，白色50%，白色100%）；蒙版图像：线性渐变（向右，透明0，透明50%，白色50%，白色100%）；}

字体大小：<input type=“range”min=1 max=4 step=0.05 value=2 oninput=“zoom（this.value）”onchange=“zoom（this.value）”>回退解决方案。。。对于所有浏览器</div>