有没有可能将CSS应用到一个字符的一半上？

提问者：小点点

有没有可能将CSS应用到一个字符的一半上？

我要找的是:

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

我目前搜索和尝试的内容（没有运气）:

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

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

是否存在CSS或JavaScript解决方案，或者我将不得不求助于图像？我更愿意不走图像路线，因为这段文字将最终被动态生成。

更新:

既然很多人都问我为什么要设计一个角色的一半，这就是为什么。我所在的城市最近花了25万美元为自己定义了一个新的“品牌”。这个标志就是他们想出来的。很多人抱怨过简单和缺乏创意，并继续这样做。我的目标是想出这个网站作为一个笑话。键入'Halifax'，你就会明白我的意思了。

共3个答案

匿名用户

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

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

这对任何动态文本或单个字符都有效，并且都是自动化的。您只需要在目标文本上添加一个类，其余的事情就可以处理了。

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

单个字符的说明:

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

对于每个包含字符的span元素，您可以创建一个数据属性，例如这里的data-content=“x”，并在伪元素上使用content:attr（data-content）；，这样.halfstyle:before类将是动态的，您不需要为每个实例硬编码它。

任何文本的说明:

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

null

// 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('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // 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 += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

匿名用户

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

首先，确保包含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/。

匿名用户

编辑（2017年10月）:background-clip或者更确切地说background-image options现在被每个主要浏览器支持:CanIUse

是的，你只需要一个字符和CSS就可以做到这一点。

但仅限于Webkit（和Chrome）:

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

null

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

<h1>X</h1>