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

HuntsBot

于 2022-12-23 09:03:18 发布

阅读量497

点赞数

文章标签： css javascript 前端 xhtml postcss

本文链接：https://blog.csdn.net/kalman2019/article/details/128415608

版权

问：

我在找什么：

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

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

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

使用 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()/2); $(^{'} s p an : n t h - c hi l d (2)^{'}) . css (^{'} t e x t - in d e n t^{'}, -$ (‘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

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

HuntsBot

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
是否可以将 CSS 应用于字符的一半？

我在找什么：一种设置一半字符样式的方法。（在这种情况下，一半的字母是透明的）我目前搜索并尝试过的内容（没有运气）：样式化半个字符/字母的方法使用 CSS 或 JavaScript 对字符的一部分进行样式设置将 CSS 应用于 50% 的字符下面是我试图获得的一个例子。https://i.stack.imgur.com/SaH8v.png是否存在 CSS 或 JavaScript 解决方案，或者我将不得不求助于图像？我不想走图像路线，因为这个文本最终会动态生成。更新：既然很多人问我为什么要设计角
复制链接

扫一扫