用ChatGPT解决这个技术问题 Extra ChatGPT

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

我在找什么：

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

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

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

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

将 CSS 应用于 50% 的字符

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

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

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

更新：

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

评论不用于扩展讨论；此对话已moved to chat。
他们问“为什么”，因为他们想知道为什么你会使用 CSS 而不是使用 SVG 或图像编辑器。与有关其徽标的业务决策无关。根据您指向他们徽标的链接，您为什么不直接裁剪 X？
在将其中一些方法应用于文本之前，请考虑可访问性。下面提到的方法非常令人沮丧，因为它们不能提高视力差、学习障碍、失语、阅读障碍或成人识字率低的人的易读性和可读性。有需要遵循的指导方针，甚至谷歌宣布将根据网站对 WCAG 规则的遵守情况开始对网站进行排名。很容易与那些使用工具作为斧头的人进行测试。如果改为使用图像/svg，则两者都需要替代文本来传达所传达的信息。

A
Arbel

现在作为插件在 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 类添加到包含文本的元素。

// 用于自动模式的 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++) { // 为每个字符创建一个样式元素并附加到容器输出 += ''; } // 只写入 DOM 一次 $el.append(output); } ); }); .halfStyle { 位置：相对；显示：内联块；字体大小：80px； /* 或任何字体大小都可以 */ color: black; /* 或透明，任何颜色 */ overflow: hidden;空白：pre； /* 保护空格不折叠 */ } .halfStyle:before { display: block; z-index：1；位置：绝对；顶部：0；左：0；宽度：50%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;颜色：#f00； }

单字符：

X Y Z A

自动：

Half-风格，请。

(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++) { // 为每个字符创建一个样式元素并附加到容器输出 += ''; } // 只写入 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++) { // 为每个字符创建一个样式元素并附加到容器输出 += ''; } // 只写入 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++) { // 为每个字符创建一个样式元素并附加到容器输出 += ''; } // 只写入 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++) { // 为每个字符创建一个样式元素并附加到容器输出 += ''; } // 只写入 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

// 用于自动模式的 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++) { // 为每个字符创建一个样式元素并附加到容器输出 += ''; } // 只写入 DOM 一次 $el.append(output); } ); });身体{背景颜色：黑色； } .textToHalfStyle { 显示：块；边距：200px 0 0 0；文本对齐：居中； } .halfStyle { font-family: 'Libre Baskerville', serif;位置：相对；显示：内联块；宽度：1；字体大小：70px；颜色：黑色;溢出：隐藏；空白：pre；文字阴影：1px 2px 0 白色； } .halfStyle:before { 显示：块； z-index：1；位置：绝对；顶部：0；宽度：50%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow: hidden;白颜色; }

单字符：

X Y Z A

自动：

Half-风格，请。

(JSFiddle demo)

-@SamTremaine 对 HalfStyle 的 PeelingStyle 改进

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

// 用于自动模式的 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++) { // 为每个字符创建一个样式元素并附加到容器输出 += ''; } // 只写入 DOM 一次 $el.append(output); } ); }); .halfStyle { 位置：相对；显示：内联块；字体大小：68px；颜色：rgba(0, 0, 0, 0.8);溢出：隐藏；空白：pre；变换：旋转（4度）；文字阴影：2px 1px 3px rgba(0, 0, 0, 0.3); } .halfStyle:before { /* 创建左侧部分 */ display: block; z-index：1；位置：绝对；顶部：-0.5px；左：-3px；宽度：100%；内容：attr（数据内容）；溢出：隐藏；指针事件：无；颜色：#FFF；变换：旋转（-4度）；文字阴影：0px 0px 1px #000; }

单字符：

X Y Z A

自动：

Half-风格，请。

（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 += '

< span class="textToHalfStyle" data-halfstyle="hs-base">Half-style，请。

半样式，请。

半样式，请。

半风格，请。

(JSFiddle demo)

评论不用于扩展讨论；此对话已moved to chat。
这很酷。值得注意的是，这种技术打破了自动换行、空白和字符间距 CSS。
T
TylerH

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

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

在 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/ 上有关它的更多信息。

它会出现这样的！虽然，我可以看到一个问题。是什么导致了一些字母之间的差距？例如，两个D之间的巨大差距。
好吧，那是因为间距和边距。无论如何，我会研究并改进它。 （可能我会做一个“插件”）很高兴我能帮忙:)
这与文本换行有问题，即使在最新的小提琴中也会出现。当一个字符换行时，它基本上分成了两个。不过，应该是一个微不足道的修复。
不要依赖 jquery-latest.min.js，如果 jQuery 更新并且插件不能与较新的插件一起使用，它会使您的网站在没有警告的情况下崩溃。相反：使用特定版本并在更新时检查兼容性。
您可能想要编辑您的答案以不建议使用 jquery-latest.js。正如@NielsBom 所提到的，过去它可能会在更新时破坏您的网站。自 2014 年 7 月以来，它不会这样做，但那是因为 it is locked at version 1.11.1 并且永远不会再次更新。
T
TylerH

是的，你可以只用一个字符和 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;，则选择可以很好地处理多个字符，例如 <h1>X</h1><h1>Y</h1><h1>Z</h1>。
C
Community

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

JSFiddle 演示

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

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

HTML： 

<div class='split-color'>Two is better than one.</div>

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

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

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 作为红色停止。
R
Ruskin

如果你对此感兴趣，那么 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 上的更多详细信息

A
Al Foиce ѫ

我能得到的最近的：

$(function(){ $('span').width($('span').width()/2); $('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
T
TylerH

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

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

var textToHalfStyle = $('.textToHalfStyle').text(); var textToHalfStyleChars = textToHalfStyle.split(''); $('.textToHalfStyle').html(''); $.each(textToHalfStyleChars, function(i,v){ $('.textToHalfStyle').append('' + v + ''); });身体{背景颜色：黑色； } .textToHalfStyle{ 显示：块；边距：200px 0 0 0；文本对齐：居中； } .halfStyle { font-family: 'Libre Baskerville', serif;位置：相对；显示：内联块；宽度：1；字体大小：70px；颜色：黑色;溢出：隐藏；空白：pre；文字阴影：1px 2px 0 白色； } .halfStyle:before { display:block; z-索引：1；位置：绝对；顶部：0；宽度：50%；内容：attr（数据内容）； /* 伪元素的动态内容 */ overflow:hidden;白颜色; } 博士。 Jekyll 和 M. Hide

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

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

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

A
Adjit

有限的 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; }

这是一个句子

T
TylerH

一个很好的利用 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;
}
S
Sam Tremaine 
.halfStyle {
    position:relative;
    display:inline-block;
    font-size:68px; /* or any font size will work */
    color: rgba(0,0,0,0.8); /* or transparent, any color */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    text-shadow:2px 1px 3px rgba(0,0,0,0.3);
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:-0.5px;
    left:-3px;
    width: 100%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
    transform:rotate(-4deg);
    -webkit-transform:rotate(-4deg);
    text-shadow:0 0 1px black;

}

http://experimental.samtremaine.co.uk/half-style/

你可以撬开这段代码来做各种有趣的事情——这只是我的同事和我昨晚想出的一个实现。

k
kshetline

对于较短的文本，这样的事情怎么样？

如果您使用循环执行某些操作，它甚至可以处理更长的文本，使用 JavaScript 重复字符。无论如何，结果是这样的：

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

p.char { 位置：相对；显示：内联块；字体大小：60px；红色; } p.char：之前 { 位置：绝对；内容：attr(char);宽度：50%；溢出：隐藏；颜色：黑色; }

S

t

a

c

k

o

v

e

r

f

l

< p class="char" char="o">o

w

R
Ricardo Zea

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

几个注意事项：

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

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

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

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

** 然而，这种方法创建了非常有趣的带有不对称字符的“形状”。尝试在 CSS 中将 X 更改为 K 或小写字母，如 h 或 ap :)

HTML 

<span class="half-letter"></span>

SCSS 

.half-character { 
  display: inline-block;
  font: bold 350px/.8 Arial;
  position: relative;

  &:before, &:after {
    content: 'X'; //Change character here
    display: inline-block;
    width: 50%;
    overflow: hidden;
    color: #7db9e8;
  }
  &:after {
    position: absolute;
    top: 0;
    left: 50%;
    color: #1e5799;
    transform: rotateY(-180deg);
  }
}
S
Sleek Geek

这可以通过 CSS :before 选择器和 content property value 来实现。

.halfed, .halfed1 { 浮动：左； } .halfed, .halfed1 { font-family: arial;字体大小：300px；字体粗细：加粗；宽度：200px；高度：300px；位置：相对； /* 帮助保存内容值 */ overflow: hidden;颜色：#000； } .halfed:before, .halfed1:before { 宽度：50%; /* 我们想显示多少 */ overflow: hidden; /* 隐藏超出我们维度的内容 */ content: 'X'; /* 半角字符 */ height: 100%;位置：绝对；颜色：#28507D； } /* 对于水平截断 */ .halfed1:before { width: 100%;高度：55%； }

X
X

>> See on jsFiddle

S
Salman A

如果您愿意，也可以使用 SVG 来实现：

var title = document.querySelector('h1'), text = title.innerHTML, svgTemplate = document.querySelector('svg'), charStyle = svgTemplate.querySelector('#text'); svgTemplate.style.display = '块';变量空间 = 0; for (var i = 0; i < text.length; i++) { var x = charStyle.cloneNode(); x.textContent = 文本[i]; svgTemplate.appendChild(x); x.setAttribute('x', 空间);空格 += x.clientWidth || 15; } title.innerHTML = ''; title.appendChild(svgTemplate);

这不是解决方案 X

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

s
schmijos

您可以使用以下代码。在此示例中，我使用了 h1 标记并添加了一个属性 data-title-text="Display Text"，该属性将在 h1 标记文本元素上显示不同颜色的文本，从而产生半色文本，如下例所示

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

正文 { 文本对齐：中心；边距：0； } h1 { 颜色：#111;字体系列：arial；位置：相对；字体家族：'奥斯瓦尔德'，无衬线；显示：内联块；字体大小：2.5em； } h1::after { 内容：attr(data-title-text);颜色：#e5554e；位置：绝对；左：0；顶部：0；剪辑：矩形（0、1000px、30px、0）； }

显示文本

m
mrReiha

只为载入史册！

我从 5 到 6 年前为自己的工作提出了一个解决方案，即 Gradext（纯 javascript 和纯 css，无依赖）。

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

<span>A</span>

现在，如果您想在文本上制作渐变，您需要创建多个图层，每个图层都有特定的颜色，并且创建的光谱将说明渐变效果。

例如，看看这是 <span> 内的单词 lorem 并将导致水平渐变效果（ check the examples ）： 

 <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>

你也可以继续做这个模式很长一段时间和很长的段落。

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

但！

如果您想在文本上创建垂直渐变效果怎么办？

然后还有另一种可能会有所帮助的解决方案。我会详细描述。

再次假设我们的第一个 <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 volutpat.</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 volutpat.</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 volutpat.</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 volutpat.</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 volutpat.</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 volutpat.</span>

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

再次，但是！

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

好吧，还有另一种解决方案。您绝对应该检查 animation: true 甚至 .hoverable() 方法，这将导致基于光标位置开始渐变！ （听起来很酷xD）

https://i.stack.imgur.com/0zbUJ.gif

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

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

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

Here you can find a working live demo 并且原始存储库是 here on GitHub as well, open source 并准备好获取一些更新 ( :D )

这是我第一次（是的，5 年后，你没听错）在 Internet 上的任何地方提到这个存储库，我对此感到很兴奋！

[更新 - 2019 年 8 月：] Github 删除了该存储库的 github-pages 演示，因为我来自伊朗！只有源代码可用here...

J
Jose Rui Santos

https://i.stack.imgur.com/9Rtre.png

这是整行文本的纯 CSS 解决方案，而不仅仅是字符元素。

div {位置：相对；顶部：2em；高度：2em；文本转换：全角； } div:before, div:after { 内容: attr(data-content);位置：绝对；顶部：0；右：0；底部：0；左：0； } div:after { 颜色: 红色; /* 单个字符的掩码。通过重复这个掩码，所有字符串都被掩码 */ -webkit-mask-image: linear-gradient(to right, transparent 0, transparent .5em, white .5em, white 1em); -webkit-mask-repeat：重复-x； /* 向右重复掩码 */ -webkit-mask-size: 1em; /* 单个字符的相对宽度 */ /* 非供应商掩码设置 */ mask-image: linear-gradient(to right, transparent 0, transparent .5em, white .5em, white 1em);掩码重复：重复-x；掩码大小：1em； } /* 演示目的 */ input[name="fontSize"]:first-of-type:checked ~ div { font-size: 1em; } input[name="fontSize"]:first-of-type + input:checked ~ div { font-size: 2em; } input[name="fontSize"]:first-of-type + input + input:checked ~ div { font-size: 3em; } 字体大小：

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

掩码的宽度为 mask-size: 1em 以匹配字符串中第一个字符的宽度。通过使用 mask-repeat: repeat-x，相同的掩码应用于第二个、第三个字符等等。

我以为使用字体 monospace 可以解决使用等宽字母的问题，但我错了。相反，我使用 text-transform: full-width 解决了这个问题，不幸的是，我相信它只支持 Firefox。

使用相对单位 em 允许设计根据 font-size 放大/缩小。

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

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

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

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

const dataElement = document.getElementById("data"), content = dataElement.textContent, zoom = function (fontSize) { dataElement.style['font-size'] = fontSize + 'em'; }; while (dataElement.firstChild) { dataElement.firstChild.remove() } for(var i = 0; i < content.length; ++i) { const spanElem = document.createElement('span'), ch = content[i ]; spanElem.setAttribute('data-ch', ch); spanElem.appendChild(document.createTextNode(ch === ' ' ? '\u00A0' : ch)); data.appendChild(spanElem); } #data { 位置：相对；顶部：2em；高度：2em；字体大小：2em； } #data span { 显示：内联块；位置：相对；颜色：透明； } #data span:before, #data span:after { 内容：attr(data-ch);显示：内联块；位置：绝对；顶部：0；右：0；底部：0；左：0；文本对齐：居中；颜色：初始； } #data span:after { color: red; -webkit-mask-image：线性渐变（向右，透明 0，透明 50%，白色 50%，白色 100%）； mask-image：线性渐变（向右，透明 0，透明 50%，白色 50%，白色 100%）； } 字体大小：

后备解决方案...适用于所有浏览器

t
the Hutt

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

如果字体是等宽字体。

如果使用垂直布局。

div { 字体大小：80px;字体粗细：加粗；颜色：透明；填充：0；边距：0；背景：线性渐变（90度，rgb（34,67,143）0％50％，#409FBF 50％）；背景剪辑：文本； -webkit-background-clip：文本； } .one { 字体系列：'Nova Mono';背景重复：重复-x；背景尺寸：45px； } .two { font-family: 'Gideon Roman';写作模式：垂直lr；文本方向：直立；字母间距：-35px；高度：500px； }

X-RAY Winter
Minty

预期输出，以防字体不可用：

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

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

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

友情链接

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.