是否可以将 CSS 应用于字符的一半？

你的名字 2024-03-30 11:33 57阅读 0赞

## 问： ##

我在找什么：

一种设置一半字符样式的方法。 （在这种情况下，一半的字母是透明的）

我目前搜索并尝试过的内容（没有运气）：

样式化半个字符/字母的方法

使用 CSS 或 JavaScript 对字符的一部分进行样式设置

将 CSS 应用于 50% 的字符

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

https://i.stack.imgur.com/SaH8v.png

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

更新：

既然很多人问我为什么要设计角色的一半，这就是原因。我的城市最近花了 250,000 美元为自己定义一个新的“品牌”。这 logo 是他们想出的。许多人抱怨简单和缺乏创造力，并继续这样做。我的目标是想出这个 website 作为一个笑话。输入“哈利法克斯”，你就会明白我的意思。

## 答1: ##

> 打造属于自己的副业，开启自由职业之旅，从huntsbot.com开始!

现在作为插件在 GitHub 上！

https://i.stack.imgur.com/Glo2Q.png

演示 |下载邮编 | Half-Style.com（重定向到 GitHub）

单个字符的纯 CSS

JavaScript 用于跨文本或多个字符的自动化

为盲人或视障者的屏幕阅读器保留文本可访问性

第 1 部分：基本解决方案

https://i.stack.imgur.com/ZYic1.png

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

这适用于任何动态文本或单个字符，并且都是自动化的。您需要做的就是在目标文本上添加一个类，剩下的就交给我们了。

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

单个字符的解释：

纯 CSS。您需要做的就是将 .halfStyle 类应用于每个包含您想要半样式化的字符的元素。

对于每个包含字符的 span 元素，您可以创建一个数据属性，例如此处的 data-content=“X”，并在伪元素上使用 content: attr(data-content);，因此 .halfStyle:before 类将是动态的，您无需对其进行硬编码对于每个实例。

任何文本的解释：

只需将 textToHalfStyle 类添加到包含文本的元素。

(JSFiddle demo)

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

https://i.stack.imgur.com/zYa0F.png

使用此解决方案，您可以单独和独立地设置左右部件的样式。

一切都是一样的，只有更高级的 CSS 才能发挥作用。

jQuery(function($) \{ var text, chars, $el, i, output; // 遍历所有出现的类 $(‘.textToHalfStyle’).each(function(idx, el) \{ $el = $(el) ; text = $el.text(); chars = text.split(‘’); // 设置屏幕阅读器文本 $el.html(‘’ + text + ‘’); // 重置输出以追加 output = ‘’; // 遍历所有字符the text for (i = 0; i < chars.length; i++) \{ // 为每个字符创建一个样式元素并附加到容器输出 += ‘’ + chars\[i\] + ‘’; \} // 只写入 DOM 一次 $el.append(output); \}); \}); .halfStyle \{ 位置：相对；显示：内联块；字体大小：80px； /\* 或任何字体大小都可以 */ color: transparent; /* 隐藏基字符 */ overflow: hidden;空白：pre； /* 保留空格不折叠 */ \} .halfStyle:before \{ /* 创建左侧部分 */ display: block; z-index：1；位置：绝对；顶部：0；宽度：50%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;指针事件：无； /* 所以基本字符可以通过鼠标选择 */ color: \#f00; /* 用于演示 */ text-shadow: 2px -2px 0px \#af0; /* 用于演示目的 */ \} .halfStyle:after \{ /* 创建右侧部分 */ display: block;方向：rtl； /* 很重要，会让宽度从右边开始 */ position: absolute; z指数：2；顶部：0；左：50%；宽度：50%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;指针事件：无； /* 所以基本字符可以通过鼠标选择 */ color: \#000; /* 用于演示 */ text-shadow: 2px 2px 0px \#0af; /* 用于演示目的 \*/ \} 单字符： X Y Z A 自动化： 半样式，请。

(JSFiddle demo)

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

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

\-水平半部分

没有文字阴影：

每个半部分独立的文本阴影的可能性：

// 用于自动模式的 jQuery jQuery(function($) \{ var text, chars, $el, i, output; // 遍历所有出现的类 $(‘.textToHalfStyle’).each(function(idx, el) \{ $ el = $(el); text = $el.text(); chars = text.split(‘’); // 设置屏幕阅读器文本 $el.html(‘’ + text + ‘’); // 为追加输出重置输出 = ‘’; / / 遍历文本中的所有字符 for (i = 0; i < chars.length; i++) \{ // 为每个字符创建一个样式元素并附加到容器输出 += ‘’ + chars\[i\] + ‘’; \} // 只写入 DOM 一次 $el.append(output); \} ); \}); .halfStyle \{ 位置：相对；显示：内联块；字体大小：80px； /\* 或任何字体大小都可以 */ color: transparent; /* 隐藏基字符 */ overflow: hidden;空白：pre； /* 保留空格不折叠 */ \} .halfStyle:before \{ /* 创建顶部 */ display: block; z指数：2；位置：绝对；顶部：0；高度：50%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;指针事件：无； /* 所以基本字符可以通过鼠标选择 */ color: \#f00; /* 用于演示 */ text-shadow: 2px -2px 0px \#af0; /* 用于演示目的 */ \} .halfStyle:after \{ /* 创建底部 */ display: block;位置：绝对； z-index：1；顶部：0；高度：100%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;指针事件：无； /* 所以基本字符可以通过鼠标选择 */ color: \#000; /* 用于演示 */ text-shadow: 2px 2px 0px \#0af; /* 用于演示目的 \*/ \} 单字符： X Y Z A 自动化： 半样式，请。

(JSFiddle demo)

\-垂直 1/3 零件

没有文字阴影：

每个 1/3 部分独立的文本阴影的可能性：

// 用于自动模式的 jQuery jQuery(function($) \{ var text, chars, $el, i, output; // 遍历所有出现的类 $(‘.textToHalfStyle’).each(function(idx, el) \{ $ el = $(el); text = $el.text(); chars = text.split(‘’); // 设置屏幕阅读器文本 $el.html(‘’ + text + ‘’); // 为追加输出重置输出 = ‘’; / / 遍历文本中的所有字符 for (i = 0; i < chars.length; i++) \{ // 为每个字符创建一个样式元素并附加到容器输出 += ‘’ + chars\[i\] + ‘’; \} // 只写入 DOM 一次 $el.append(output); \} ); \}); .halfStyle \{ /\* 基本字符和右 1/3 */ 位置：相对；显示：内联块；字体大小：80px； /* 或任何字体大小都可以 */ color: transparent; /* 隐藏基字符 */ overflow: hidden;空白：pre； /* 防止空格折叠 */ color: \#f0f; /* 用于演示 */ text-shadow: 2px 2px 0px \#0af; /* 用于演示目的 */ \} .halfStyle:before \{ /* 创建左 1/3 */ display: block; z指数：2；位置：绝对；顶部：0；宽度：33.33%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;指针事件：无； /* 所以基本字符可以通过鼠标选择 */ color: \#f00; /* 用于演示 */ text-shadow: 2px -2px 0px \#af0; /* 用于演示目的 */ \} .halfStyle:after \{ /* 创建中间 1/3 */ display: block; z-index：1；位置：绝对；顶部：0；宽度：66.66%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;指针事件：无； /* 所以基本字符可以通过鼠标选择 */ color: \#000; /* 用于演示目的 */ text-shadow: 2px 2px 0px \#af0; /* 用于演示目的 \*/ \} 单字符： X Y Z A 自动化： 半样式，请。

(JSFiddle demo)

\-水平 1/3 零件

没有文字阴影：

每个 1/3 部分独立的文本阴影的可能性：

// 用于自动模式的 jQuery jQuery(function($) \{ var text, chars, $el, i, output; // 遍历所有出现的类 $(‘.textToHalfStyle’).each(function(idx, el) \{ $ el = $(el); text = $el.text(); chars = text.split(‘’); // 设置屏幕阅读器文本 $el.html(‘’ + text + ‘’); // 为追加输出重置输出 = ‘’; / / 遍历文本中的所有字符 for (i = 0; i < chars.length; i++) \{ // 为每个字符创建一个样式元素并附加到容器输出 += ‘’ + chars\[i\] + ‘’; \} // 只写入 DOM 一次 $el.append(output); \} ); \}); .halfStyle \{ /\* 基本字符和底部 1/3 */ 位置：相对；显示：内联块；字体大小：80px； /* 或任何字体大小都可以 */ color: transparent;溢出：隐藏；空白：pre； /* 防止空格折叠 */ color: \#f0f;文字阴影：2px 2px 0px \#0af; /* 用于演示目的 */ \} .halfStyle:before \{ /* 创建顶部 1/3 */ display: block; z指数：2；位置：绝对；顶部：0；身高：33.33%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;指针事件：无； /* 所以基本字符可以通过鼠标选择 */ color: \#f00; /* 用于演示目的 */ text-shadow: 2px -2px 0px \#fa0; /* 用于演示目的 */ \} .halfStyle:after \{ /* 创建中间 1/3 */ display: block;位置：绝对； z-index：1；顶部：0；身高：66.66%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;指针事件：无； /* 所以基本字符可以通过鼠标选择 */ color: \#000; /* 用于演示目的 */ text-shadow: 2px 2px 0px \#af0; /* 用于演示目的 \*/ \} 单字符： X Y Z A 自动化： 半样式，请。

(JSFiddle demo)

\-HalfStyle改进@KevinGranger

https://i.stack.imgur.com/PgdJ6.png

(JSFiddle demo)

\-@SamTremaine 对 HalfStyle 的 PeelingStyle 改进

https://i.stack.imgur.com/r67KC.png

（JSFiddle demo 和 samtremaine.co.uk）

第 4 部分：准备生产

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

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

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

https://i.stack.imgur.com/RxjKF.png

此外，CSS 样式集的类定义与上面提到的 \[-CustomClassName-\] 部分匹配并链接到 .halfStyle，所以我们将有 .halfStyle.\[-CustomClassName-\]

jQuery(function($) \{ var halfstyle\_text, halfstyle\_chars, $halfstyle\_el, halfstyle\_i, halfstyle\_output, halfstyle\_style; // 遍历所有的类 $(‘.textToHalfStyle’).each(function(idx, halfstyle\_el) \{ $halfstyle\_el = $( halfstyle\_el); halfstyle\_style = $halfstyle\_el.data(‘halfstyle’) || ‘hs-base’; halfstyle\_text = $halfstyle\_el.text(); halfstyle\_chars = halfstyle\_text.split(‘’); // 设置屏幕阅读器文本 $ halfstyle\_el.html(‘’ + halfstyle\_text + ’ '); // 为追加而重置输出 halfstyle\_output = ‘’; // 遍历文本中的所有字符 for (halfstyle\_i = 0; halfstyle\_i < halfstyle\_chars.length; halfstyle\_i++) \{ // 为每个字符创建一个样式元素并追加到容器 halfstyle\_output += ‘’ + halfstyle\_chars\[halfstyle\_i\] + ‘’; \} // 只向 DOM 写入一次 $halfstyle\_el.append(halfstyle\_output); \}); \}); /\* 开始半样式 hs-base */ .halfStyle.hs-base \{ position: relative;显示：内联块；字体大小：80px； /* 或任何字体大小都可以使用 */ overflow: hidden;空白：pre； /* 防止空格折叠 */ color: \#000; /* 用于演示目的 */ \} .halfStyle.hs-base:before \{ display: block; z-index：1；位置：绝对；顶部：0；宽度：50%；内容：attr（数据内容）； /* 伪元素的动态内容 */ pointer-events: none; /* 所以基字符可以通过鼠标选择 */ overflow: hidden;颜色：\#f00； /* 用于演示目的 */ \} /* end half-style hs-base */ /* start half-style hs-horizontal-third */ .halfStyle.hs-horizontal-third \{ /* base char 也是底部 1 /3 */ 位置：相对；显示：内联块；字体大小：80px； /* 或任何字体大小都可以 */ color: transparent;溢出：隐藏；空白：pre； /* 防止空格折叠 */ color: \#f0f;文字阴影：2px 2px 0px \#0af; /* 用于演示目的 */ \} .halfStyle.hs-horizontal-third:before \{ /* 创建顶部 1/3 */ display: block; z指数：2；位置：绝对；顶部：0；身高：33.33%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;指针事件：无； /* 所以基本字符可以通过鼠标选择 */ color: \#f00; /* 用于演示目的 */ text-shadow: 2px -2px 0px \#fa0; /* 用于演示目的 */ \} .halfStyle.hs-horizontal-third:after \{ /* 创建中间 1/3 */ display: block;位置：绝对； z-index：1；顶部：0；身高：66.66%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;指针事件：无； /* 所以基本字符可以通过鼠标选择 */ color: \#000; /* 用于演示目的 */ text-shadow: 2px 2px 0px \#af0; /* 用于演示目的 */ \} /* 结束半样式 hs-horizontal-third */ /* 开始半样式 hs-PeelingStyle，由 Stackoverflow.com 上的用户 SamTremaine */ .halfStyle.hs-PeelingStyle \{ position: relative ;显示：内联块；字体大小：68px；颜色：rgba(0, 0, 0, 0.8);溢出：隐藏；空白：pre；变换：旋转（4度）；文字阴影：2px 1px 3px rgba(0, 0, 0, 0.3); \} .halfStyle.hs-PeelingStyle:before \{ /* 创建左侧部分 */ display: block; z-index：1；位置：绝对；顶部：-0.5px；左：-3px；宽度：100%；内容：attr（数据内容）；溢出：隐藏；指针事件：无；颜色：\#FFF；变换：旋转（-4度）；文字阴影：0px 0px 1px \#000; \} /* 结束半样式 hs-PeelingStyle */ /* 开始半样式 hs-KevinGranger，由 StackOverflow.com 上的用户 KevinGranger */ .textToHalfStyle.hs-KevinGranger \{ display: block;边距：200px 0 0 0；文本对齐：居中； \} .halfStyle.hs-KevinGranger \{ font-family: ‘Libre Baskerville’, serif;位置：相对；显示：内联块；宽度：1；字体大小：70px；颜色：黑色;溢出：隐藏；空白：pre；文字阴影：1px 2px 0 白色； \} .halfStyle.hs-KevinGranger:before \{ display: block; z-index：1；位置：绝对；顶部：0；宽度：50%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;白颜色; \} /* 结束半样式 hs-KevinGranger < span class=“textToHalfStyle” data-halfstyle=“hs-base”>Half-style，请。 半样式，请。 半样式，请。 半风格，请。

(JSFiddle demo)

`评论不用于扩展讨论；此对话已moved to chat。`

`这很酷。值得注意的是，这种技术打破了自动换行、空白和字符间距 CSS。`

## 答2: ##

> huntsbot.com全球7大洲远程工作机会，探索不一样的工作方式

https://i.stack.imgur.com/TkwNq.png

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

在 GitHub 上查看项目 - 查看项目网站。 （所以你可以看到所有的拆分样式）

用法

首先，确保包含 jQuery 库。获取最新 jQuery 版本的最佳方法是更新您的 head 标签：

下载文件后，确保将它们包含在项目中：

标记

您所要做的就是分配类 splitchar ，然后将所需的样式分配给包装您的文本的元素。例如

Splitchar

完成所有这些之后，只需确保在文档就绪文件中调用 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/ 上有关它的更多信息。

`它会出现这样的！虽然，我可以看到一个问题。是什么导致了一些字母之间的差距？例如，两个D之间的巨大差距。`

`好吧，那是因为间距和边距。无论如何，我会研究并改进它。 （可能我会做一个“插件”）很高兴我能帮忙:)`

`这与文本换行有问题，即使在最新的小提琴中也会出现。当一个字符换行时，它基本上分成了两个。不过，应该是一个微不足道的修复。`

`不要依赖 jquery-latest.min.js，如果 jQuery 更新并且插件不能与较新的插件一起使用，它会使您的网站在没有警告的情况下崩溃。相反：使用特定版本并在更新时检查兼容性。`

`您可能想要编辑您的答案以不建议使用 jquery-latest.js。正如@NielsBom 所提到的，过去它可能会在更新时破坏您的网站。自 2014 年 7 月以来，它不会这样做，但那是因为 it is locked at version 1.11.1 并且永远不会再次更新。`

## 答3: ##

> 一个优秀的自由职业者，应该有对需求敏感和精准需求捕获的能力，而huntsbot.com提供了这个机会

是的，你可以只用一个字符和 CSS 来做到这一点：

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

h1 \{显示：内联块；边距：0； /\* 演示片段 */ line-height: 1em; /* 演示片段 \*/ font-family: helvetica, arial, sans-serif;字体粗细：粗体；字体大小：300px；背景：线性渐变（向右，\#7db9e8 50%，\#1e5799 50%）；背景剪辑：文本； -webkit-text-fill-color：透明； \} X

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

`WebKit 有呈现几乎 IE6/IE7 级别的怪异错误的历史（您甚至可以说 Safari 和 Chrome 是现代网络的 IE6），并且行为方式无缘无故偏离标准。 IE 自第 9 版以来已经好多了，所以虽然古老的版本应该已经死了，但我看不出有任何理由憎恨它的最新版本。而且我当然不明白为什么人们支持 WebKit/Blink 单一文化的想法（这里的评论可能是在开玩笑，但我听说过有人认真相信它）。`

`话虽如此，background-clip: text 非常棒，他们应该考虑将它（或类似 text-decoration-background 的东西）用于第 4 级模块。`

`是的，如果blink/webkit 死了而现代IE+FF 渲染引擎幸存下来，我会更高兴。这并不是说 chrome 的其余部分不好，只是它的渲染几乎是当今最糟糕的。`

`@DA：当然。然而，Blink 仍然与 webkit 非常相似，并且可疑行为并非都是后分叉，所以我不太确定是否值得非常强烈地进行区分。尽管如此，野生动物园确实似乎少了一些越野车。`

`如果您从 css 中删除 display: inline-block;，则选择可以很好地处理多个字符，例如 XYZ。`

## 答4: ##

> huntsbot.com – 程序员副业首选，一站式外包任务、远程工作、创意产品分享订阅平台。

https://i.stack.imgur.com/oBWFs.png

JSFiddle 演示

我们将只使用 CSS 伪选择器来完成它！

这种技术适用于动态生成的内容和不同的字体大小和宽度。

HTML：

Two is better than one.

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);
    }

## 答5: ##

> huntsbot.com洞察每一个产品背后的需求与收益，从而捕获灵感

这是画布中一个丑陋的实现。我尝试了这个解决方案，但结果比我预期的要差，所以无论如何都是这样。

https://i.stack.imgur.com/ltPQu.png

$(“div”).each(function() \{ var CHARS = $(this).text().split(‘’); $(this).html(“”); $.each(CHARS, function( index, char) \{ var canvas = $(“”) .css(“width”, “40px”) .css(“height”, “40px”) .get(0); $(“div” ).append(canvas); var ctx = canvas.getContext(“2d”); var gradient = ctx.createLinearGradient(0, 0, 130, 0); gradient.addColorStop(“0”, “blue”); 渐变。 addColorStop(“0.5”, “blue”); gradient.addColorStop(“0.51”, “red”); gradient.addColorStop(“1.0”, “red”); ctx.font = ‘130pt Calibri’; ctx.fillStyle =渐变；ctx.fillText(char, 10, 130); \}); \}); 示例文本

`顺便说一句，您也可以使用 0.5 作为红色停止。`

## 答6: ##

> 与HuntsBot一起，探索全球自由职业机会–huntsbot.com

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

https://i.stack.imgur.com/63fkI.gif

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

.example-one {
        
      font-size: 100px;
      @include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
    }

Chris Coyer’s CSS Tricks 和 Lucas Bebber’s Codepen page 上的更多详细信息

## 答7: ##

> huntsbot.com – 程序员副业首选，一站式外包任务、远程工作、创意产品分享订阅平台。

我能得到的最近的：

$(function()\{  ( ′ s p a n ′ ) . w i d t h ( ('span').width( (′span′).width((‘span’).width()/2);  ( ′ s p a n : n t h − c h i l d ( 2 ) ′ ) . c s s ( ′ t e x t − i n d e n t ′ , − ('span:nth-child(2)').css('text-indent' , - (′span:nth−child(2)′).css(′text−indent′,−(‘span’).width()); \});正文\{字体系列：宋体； \} span\{ 显示：内联块；溢出：隐藏； \} span:nth-child(2)\{ 颜色：红色； \} XX< /跨度>

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

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

`$('span').width() 只返回它找到的第一个跨度的宽度；它必须是你为每一对做的事情。这给了我一个想法......`

`这与 jsfiddle.net/9WWsd 上的 epascarello 示例非常相似。正如我告诉他的那样，您的示例是朝着正确方向迈出的一步，但是，在更大范围内使用将是一场噩梦。`

`@MathewMacLean，我没看到。为什么会是噩梦？这个怎么样：jsfiddle.net/9wxfY/4`

`当你去实现多个字符时，它会导致问题。`

`如果您有兴趣，我在您的第二个示例中对 JS 进行了一些优化：jsfiddle.net/9wxfY/20`

## 答8: ##

> 一个优秀的自由职业者，应该有对需求敏感和精准需求捕获的能力，而huntsbot.com提供了这个机会

https://i.stack.imgur.com/RftEr.png

我刚刚玩了@Arbel 的解决方案：

`刚玩过@Arbel 解决方案与Arbel 的解决方案有什么区别？很难看出您是否只是复制粘贴了一些代码或对其进行了改进。`

## 答9: ##

> 打造属于自己的副业，开启自由职业之旅，从huntsbot.com开始!

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

跨度\{位置：相对；颜色：rgba(50,50,200,0.5); \} span:before \{ 内容：attr(data-char);位置：绝对；宽度：50%；溢出：隐藏；颜色：RGB（50,50,200）； \} X

## 答10: ##

> 一个优秀的自由职业者，应该有对需求敏感和精准需求捕获的能力，而huntsbot.com提供了这个机会

有限的 CSS 和 jQuery 解决方案

我不确定这个解决方案有多优雅，但它把所有东西都减半：http://jsfiddle.net/9wxfY/11/

否则，我已经为您创建了一个很好的解决方案…您需要做的就是为您的 HTML 设置这个：

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

至于 CSS，它是非常有限的…您只需将其应用于 :nth-child(even)

$(function()\{ var $hc = $(‘.half-color’); var str = $hc.text(); $hc.html(“”); var i = 0; var chars; var dupText; while(i < str.length)\{ chars = str\[i\]; if(chars == " ") chars = " "; dupText = “” + chars + “”; var firstHalf = $(dupText); var secondHalf = $(dupText); $hc.append(firstHalf) $hc.append(secondHalf) var width = firstHalf.width()/2; firstHalf.width(width); secondHalf.css( ‘文本缩进’, -width); i++; \} \}); .half-color span\{ 字体大小：2em;显示：内联块；溢出：隐藏； \} .half-color span:nth-child(even)\{ color: red; \} 这是一个句子

> 打造属于自己的副业，开启自由职业之旅，从huntsbot.com开始!

## 答11: ##

> huntsbot.com高效搞钱，一站式跟进超10+任务平台外包需求

一个很好的利用 background-clip: text 支持的解决方案：http://jsfiddle.net/sandro\_paganotti/wLkVt/

span{
        
       font-size: 100px;
       background: linear-gradient(to right, black, black 50%, grey 50%, grey);
       background-clip: text;
       -webkit-text-fill-color: transparent;
    }

原文链接：[https://www.huntsbot.com/qa/daYm/is-it-possible-to-apply-css-to-half-of-a-character?lang=zh\_CN&from=csdn][https_www.huntsbot.com_qa_daYm_is-it-possible-to-apply-css-to-half-of-a-character_lang_zh_CN_from_csdn]

> 一个优秀的自由职业者，应该有对需求敏感和精准需求捕获的能力，而huntsbot.com提供了这个机会

[https_www.huntsbot.com_qa_daYm_is-it-possible-to-apply-css-to-half-of-a-character_lang_zh_CN_from_csdn]: https://www.huntsbot.com/qa/daYm/is-it-possible-to-apply-css-to-half-of-a-character?lang=zh_CN&from=csdn