关于javascript：是否可以将css应用于半个字符？

Is it possible to apply CSS to half of a character?

我要找的是：

塑造角色一半风格的方法。(在这种情况下，一半字母是透明的)

我目前搜索和尝试的内容(没有运气)：

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

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

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

更新：

既然很多人问我为什么要设计半个角色，这就是为什么。我的城市最近花了25万美元为自己定义了一个新的"品牌"。这个标志就是他们设计的。许多人抱怨简单和缺乏创造力，并继续这样做。我的目标是把这个网站当作一个笑话。输入"halifax"，你就会明白我的意思。

相关讨论

现在作为一个插件在Github上！

enter image description here 可以随意使用并改进。

demo下载zip half-style.com(重定向到github)

单个字符的纯CSS
用于跨文本或多个字符自动化的JavaScript
为盲人或视觉屏幕阅读器保留文本可访问性受损

第1部分：基本解决方案

Half Style on text

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

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

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

单个字符的解释：

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

对于每个包含字符的SPAN元素，您可以创建一个数据属性，例如这里的data-content="X"，在伪元素上使用content: attr(data-content);，因此.halfStyle:before类将是动态的，您不需要为每个实例硬编码。

任何文本的解释：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// jQuery for automated mode
jQuery(function($) {
var text, chars, $el, i, output;

// Iterate over all class occurences
$('.textToHalfStyle').each(function(idx, el) {
$el = $(el);
text = $el.text();
chars = text.split('');

// Set the screen-reader text
$el.html('' + text + '');

// Reset output for appending
output = '';

// Iterate over all chars in the text
for (i = 0; i < chars.length; i++) {
// Create a styled element for each character and append to container
output += '' + chars[i] + '';
}

// Write to DOM only once
$el.append(output);
});
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.halfStyle {
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
color: black; /* or transparent, any color */
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before {
display: block;
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
color: #f00;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

(JSFiddle演示)

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

Half Style on text - advanced - With Text Shadow

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

jQuery(function($) {
var text, chars, $el, i, output;

// Iterate over all class occurences
$('.textToHalfStyle').each(function(idx, el) {
$el = $(el);
text = $el.text();
chars = text.split('');

// Set the screen-reader text
$el.html('' + text + '');

// Reset output for appending
output = '';

// Iterate over all chars in the text
for (i = 0; i < chars.length; i++) {
// Create a styled element for each character and append to container
output += '' + chars[i] + '';
}

// Write to DOM only once
$el.append(output);
});
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.halfStyle {
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before { /* creates the left part */
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the right part */
display: block;
direction: rtl; /* very important, will make the width to start from right */
position: absolute;
z-index: 2;
top: 0;
left: 50%;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(JSFiddle演示)

第3部分：配合比与改进

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

-水平半部分

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

.halfStyle {
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before { /* creates the top part */
display: block;
z-index: 2;
position: absolute;
top: 0;
height: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the bottom part */
display: block;
position: absolute;
z-index: 1;
top: 0;
height: 100%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(JSFiddle演示)

-垂直1/3部分

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.halfStyle { /* base char and also the right 1/3 */
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #f0f; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle:before { /* creates the left 1/3 */
display: block;
z-index: 2;
position: absolute;
top: 0;
width: 33.33%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the middle 1/3 */
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 66.66%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

(JSFiddle演示)

-水平1/3部分

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.halfStyle { /* base char and also the bottom 1/3 */
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
color: transparent;
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #f0f;
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle:before { /* creates the top 1/3 */
display: block;
z-index: 2;
position: absolute;
top: 0;
height: 33.33%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}

.halfStyle:after { /* creates the middle 1/3 */
display: block;
position: absolute;
z-index: 1;
top: 0;
height: 66.66%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(JSFiddle演示)

-@kevingranger的半风格改进

halfStyle - KevinGranger

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

body {
background-color: black;
}

.textToHalfStyle {
display: block;
margin: 200px 0 0 0;
text-align: center;
}

.halfStyle {
font-family: 'Libre Baskerville', serif;
position: relative;
display: inline-block;
width: 1;
font-size: 70px;
color: black;
overflow: hidden;
white-space: pre;
text-shadow: 1px 2px 0 white;
}

.halfStyle:before {
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
color: white;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(JSFiddle演示)

-@samtremaine改进半成品的削皮方式

halfStyle - SamTremaine

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.halfStyle {
position: relative;
display: inline-block;
font-size: 68px;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
white-space: pre;
transform: rotate(4deg);
text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle:before { /* creates the left part */
display: block;
z-index: 1;
position: absolute;
top: -0.5px;
left: -3px;
width: 100%;
content: attr(data-content);
overflow: hidden;
pointer-events: none;
color: #FFF;
transform: rotate(-4deg);
text-shadow: 0px 0px 1px #000;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(jfiddle演示和samtremaine.co.uk上)

第4部分：生产准备

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

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

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

halfStyle - Multiple on Same Page

同样，css样式集的类定义与上面提到的[-CustomClassName-]部分匹配，并链接到.halfStyle，因此我们将拥有.halfStyle.[-CustomClassName-]。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

jQuery(function($) {
var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;

// Iterate over all class occurrences
$('.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('');

// Set the screen-reader text
$halfstyle_el.html('' + halfstyle_text + '');

// Reset output for appending
halfstyle_output = '';

// Iterate over all chars in the text
for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
// Create a styled element for each character and append to container
halfstyle_output += '' + halfstyle_chars[halfstyle_i] + '';
}

// Write to DOM only once
$halfstyle_el.append(halfstyle_output);
});
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

/* start half-style hs-base */

.halfStyle.hs-base {
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #000; /* for demo purposes */
}

.halfStyle.hs-base:before {
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
pointer-events: none; /* so the base char is selectable by mouse */
overflow: hidden;
color: #f00; /* for demo purposes */
}

/* end half-style hs-base */

/* start half-style hs-horizontal-third */

.halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
color: transparent;
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #f0f;
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */
display: block;
z-index: 2;
position: absolute;
top: 0;
height: 33.33%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}

.halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */
display: block;
position: absolute;
z-index: 1;
top: 0;
height: 66.66%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}

/* end half-style hs-horizontal-third */

/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */

.halfStyle.hs-PeelingStyle {
position: relative;
display: inline-block;
font-size: 68px;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
white-space: pre;
transform: rotate(4deg);
text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle.hs-PeelingStyle:before { /* creates the left part */
display: block;
z-index: 1;
position: absolute;
top: -0.5px;
left: -3px;
width: 100%;
content: attr(data-content);
overflow: hidden;
pointer-events: none;
color: #FFF;
transform: rotate(-4deg);
text-shadow: 0px 0px 1px #000;
}

/* end half-style hs-PeelingStyle */

/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/

.textToHalfStyle.hs-KevinGranger {
display: block;
margin: 200px 0 0 0;
text-align: center;
}

.halfStyle.hs-KevinGranger {
font-family: 'Libre Baskerville', serif;
position: relative;
display: inline-block;
width: 1;
font-size: 70px;
color: black;
overflow: hidden;
white-space: pre;
text-shadow: 1px 2px 0 white;
}

.halfStyle.hs-KevinGranger:before {
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
color: white;
}

/* end half-style hs-KevinGranger

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

(JSFiddle演示)

相关讨论

enter image description here

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

在Github上查看项目-查看项目网站。(这样您就可以看到所有拆分样式)用法

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

1	<script src="http://code.jquery.com/jquery-latest.min.js">

下载文件后，请确保在项目中包含这些文件：

1 2	<link rel="stylesheet" type="text/css" href="css/splitchar.css"> <script type="text/javascript" src="js/splitchar.js">

标记

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

1	<h1 class="splitchar horizontal">Splitchar

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

1	$(".splitchar").splitchar();

定制

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

1
2
3

.horizontal { /* Base CSS - e.g font-size */ }
.horizontal:before { /* CSS for the left half */ }
.horizontal:after { /* CSS for the right half */ }

就是这样！现在您已经设置好了EDOCX1[1]插件。有关它的更多信息，请访问http://razvanbalosin.com/splitchar.js/。

相关讨论

Edit (oct 2017): background-clip or rather background-image options are now supported by every major browser: CanIUse

是的，您可以只使用一个字符和CSS来完成此操作。

但仅限于WebKit(和Chrome)：

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

1
2
3
4
5
6
7
8
9
10
11

h1 {
display: inline-block;
margin: 0; /* for demo snippet */
line-height: 1em; /* for demo snippet */
font-family: helvetica, arial, sans-serif;
font-weight: bold;
font-size: 300px;
background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

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

相关讨论

Example

JSFiddle演示

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

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

HTML：

1	Two is better than one.

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

相关讨论

它可能是不相关的，也许不是，但在不久前，我创建了一个jquery函数，它执行相同的操作，但在水平方向上。

我称之为"strippex"代表"stripe"+"text"，演示：http://cdpn.io/fcibg

我不是说这是任何问题的解决方案，但我已经尝试将CSS应用于半个字符，但在水平方向上，这样的想法是一样的，实现可能是可怕的，但它是有效的。

啊，最重要的是，我创造它很有趣！

enter image description here

相关讨论

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

Canvas example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$("div").each(function(){
var CHARS = $(this).text().split('');
$(this).html("");
$.each(CHARS,function(index, char){
var canvas = $("<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");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("0.51","red");
gradient.addColorStop("1.0","red");
ctx.font = '130pt Calibri';
ctx.fillStyle = gradient;
ctx.fillText(char, 10, 130);
});
});

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> Example Text

相关讨论

如果您对此感兴趣，那么LucasBebber的故障是一个非常相似和超级酷的效果：

enter image description here

使用简单的sass mixin创建，例如

1
2
3
4

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

更多详情请访问ChrisCoyer的CSS技巧和LucasBebber的代码笔页面。

我能得到的最接近的：

1
2
3
4

$(function(){
$('span').width($('span').width()/2);
$('span:nth-child(2)').css('text-indent', -$('span').width());
});

1
2
3
4
5
6
7
8
9
10

body{
font-family: arial;
}
span{
display: inline-block;
overflow: hidden;
}
span:nth-child(2){
color: red;
}

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <span>X</span><span>X</span>

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

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

相关讨论

Enter image description here

我刚玩过@arbel的解决方案：

1
2
3
4
5
6

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v){
$('.textToHalfStyle').append('' + v + '');
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

body{
background-color: black;
}
.textToHalfStyle{
display:block;
margin: 200px 0 0 0;
text-align:center;
}
.halfStyle {
font-family: 'Libre Baskerville', serif;
position:relative;
display:inline-block;
width:1;
font-size:70px;
color: black;
overflow:hidden;
white-space: pre;
text-shadow: 1px 2px 0 white;
}
.halfStyle:before {
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
color: white;
}

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> <span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>

相关讨论

另一个仅限于CSS的解决方案(但如果不想编写特定于字母的CSS，则需要数据属性)。这一款更适用于整个电路板(测试IE 9/10，Chrome最新&ff最新)

1
2
3
4
5
6
7
8
9
10
11
12

span {
position: relative;
color: rgba(50,50,200,0.5);
}

span:before {
content: attr(data-char);
position: absolute;
width: 50%;
overflow: hidden;
color: rgb(50,50,200);
}

1	<span data-char="X">X</span>

受限的CSS和jQuery解决方案

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

否则，我为你创造了一个很好的解决方案…您所需要做的就是为您的HTML准备这个：

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

至于CSS，它是非常有限的…你只需要把它应用到EDOCX1[3]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

$(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('text-indent', -width);

i++;
}
});

1
2
3
4
5
6
7
8

.half-color span{
font-size: 2em;
display: inline-block;
overflow: hidden;
}
.half-color span:nth-child(even){
color: red;
}

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> This is a sentence

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

}

Peeling Style

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

一个很好的WebKit专用解决方案，它利用了background-clip: text支持：http://jsfiddle.net/sandro-paganotti/wlkvt/

1
2
3
4
5
6

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

相关讨论

fwiw，这是我对这个的看法，只使用css:http://codepen.io/ricardozea/pen/ufbts/

几点注：

我这样做的主要原因是为了测试我自己，看看我是否能够完成角色的一半造型，同时为OP提供一个有意义的答案。
我知道这不是一个理想的或最可扩展的解决方案，这里的人提出的解决方案对于"真实世界"的场景来说要好多了。
我创建的CSS代码是基于我想到的第一个想法和我自己解决问题的方法。
我的解决方案只适用于对称字符，如x、a、o、m.*它不适用于非对称字符，如b、c、f、k或小写字母。
**然而，这种方法使用不对称字符创建了非常有趣的"形状"。尝试将x改为k或小写字母，如css中的h或p:。

HTML

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

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

像这样的短文本怎么样？

如果你做了一些循环，用javascript重复字符，它甚至可以在更长的文本中工作。无论如何，结果是这样的：

Is it possible to apply CSS to half of a character?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

p.char {
position: relative;
display: inline-block;
font-size: 60px;
color: red;
}

p.char:before {
position: absolute;
content: attr(char);
width: 50%;
overflow: hidden;
color: black;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

S

t

a

c

k

o

v

e

r

f

l

o

w

如果您愿意，也可以使用SVG来完成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var title = document.querySelector('h1'),
text = title.innerHTML,
svgTemplate = document.querySelector('svg'),
charStyle = svgTemplate.querySelector('#text');

svgTemplate.style.display = 'block';

var space = 0;

for (var i = 0; i < text.length; i++) {
var x = charStyle.cloneNode();
x.textContent = text[i];
svgTemplate.appendChild(x);
x.setAttribute('x', space);
space += x.clientWidth || 15;
}

title.innerHTML = '';
title.appendChild(svgTemplate);

1
2
3
4
5
6
7
8
9
10
11

http://codepen.io/niccbell/pen/jgcbq

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

.halfed, .halfed1 {
float: left;
}

.halfed, .halfed1 {
font-family: arial;
font-size: 300px;
font-weight: bolder;
width: 200px;
height: 300px;
position: relative; /* To help hold the content value within */
overflow: hidden;
color: #000;
}

.halfed:before, .halfed1:before {
width: 50%; /* How much we'd like to show */
overflow: hidden; /* Hide what goes beyond our dimension */
content: 'X'; /* Halfed character */
height: 100%;
position: absolute;
color: #28507D;

}

/* For Horizontal cut off */

.halfed1:before {
width: 100%;
height: 55%;

}

1
2
3

X

X

>>参见jsFiddle

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

enter image description here

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

body {
text-align: center;
margin: 0;
}

h1 {
color: #111;
font-family: arial;
position: relative;
font-family: 'Oswald', sans-serif;
display: inline-block;
font-size: 2.5em;
}

h1::after {
content: attr(data-title-text);
color: #e5554e;
position: absolute;
left: 0;
top: 0;
clip: rect(0, 1000px, 30px, 0);
}

1	<h1 data-title-text="Display Text">Display Text

只是为了历史上的记录！

我为自己5-6年前的工作提出了一个解决方案，它是Gradext(纯JavaScript和纯CSS，没有依赖性)。

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

1	<span>A</span>

现在，如果要对文本进行渐变，则需要创建一些多层，每个层单独着色，创建的光谱将说明渐变效果。

例如，看这是内部的lorem一词，它将导致水平梯度效应(检查示例)：

1
2
3
4
5

L
o
r
e
m

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

enter image description here

但是！

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

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

假设我们的第一个又出现了。但是内容不应该是单独的字母；内容应该是整个文本，现在我们要复制相同的内容吗？？一次又一次(跨度计数将定义渐变的质量，跨度越大，效果越好，但性能较差)。看看这个：

1
2
3
4
5
6

Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.

enter image description here

再一次，但是！

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

嗯，还有另一个解决办法。您一定要检查animation: true甚至.hoverable()方法，这会导致根据光标位置开始的梯度！(听起来很酷xd)

enter image description here

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

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

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

在这里，您可以找到一个正在工作的实时演示，而原来的存储库也在GitHub上，它是开放源码的，并且可以获得一些更新(：d)

这是我第一次(是的，5年后，你听对了)在互联网上的任何地方提到这个存储库，我对此感到兴奋！