我在找什么：

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

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

设计一半字符/字母的方法

使用CSS或JavaScript设计角色的一部分

将CSS应用于角色的50％

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

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

---

更新：

由于许多人问我为什么会想要塑造一半角色，这就是为什么。 我的城市最近花了25万美元为自己定义一个新的“品牌”。 这个标志是他们想出的。 许多人抱怨简单和缺乏创造力，并继续这样做。 我的目标是想出这个网站作为一个笑话。 输入“哈利法克斯”，你会明白我的意思。 :)

---

现在在GitHub上作为插件！

随意分叉并改进。

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

---

单个字符的纯CSS

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

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

第1部分：基本解决方案

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

---

这适用于任何动态文本或单个字符，并且都是自动的。 你需要做的就是在目标文本上添加一个类，其余部分将被处理。

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

单个字符的解释：

纯粹的CSS。 所有你需要做的就是将.halfStyle类应用到每个包含你想要成为半.halfStyle的角色的元素。

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

任何文字说明：

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

---

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

---

我刚刚完成了插件的开发，并且可供所有人使用！ 希望你会喜欢它。

在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/。

---

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

是的，你可以只用一个字符和CSS来完成。

但只有Webkit（和Chrome）：

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

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>

链接地址: http://www.djcxy.com/p/589.html

上一篇: Is it possible to apply CSS to half of a character?

下一篇: How to undo the last commit