我要找的是:

一种为角色的一半设置样式的方法。(在这种情况下,一半的字母是透明的)

我目前搜索并尝试的内容(运气不佳):

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

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

对此,是否存在CSS或JavaScript解决方案,还是我必须求助于图像?我宁愿不走图像路线,因为文本最终将动态生成。


更新:

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


当前回答

您可以使用以下代码。在此示例中,我使用了h1标记,并添加了一个属性数据title text=“Display text”,它将在h1标记文本元素上显示不同颜色的文本,这会产生如下示例所示的半彩色文本效果

正文{文本对齐:居中;边距:0;}h1小时{颜色:#111;字体系列:arial;位置:相对;字体系列:“Oswald”,无衬线;显示:内联块;字体大小:2.5em;}h1::之后{content:attr(数据标题文本);颜色:#e554e;位置:绝对;左:0;顶部:0;剪辑:矩形(0,1000px,30px,0);}<h1 data title text=“显示文本”>显示文本</h1>

其他回答

FWIW,这是我对仅使用CSS的看法:http://codepen.io/ricardozea/pen/uFbts/

几个注意事项:

我这样做的主要原因是为了测试自己,看看我是否能够完成一半角色的造型,同时为OP提供一个有意义的答案。我知道,这不是一个理想的或最具扩展性的解决方案,这里的人提出的解决方案对于“现实世界”场景要好得多。我创建的CSS代码是基于我脑海中的第一个想法和我自己解决这个问题的方法。我的解决方案仅适用于对称字符,如X、A、O、M。**它不适用于非对称字符,例如B、C、F、K或小写字母。**然而,这种方法用不对称的字符创造了非常有趣的“形状”。尝试将CSS中的X改为K或小写字母,如h或p:)

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

如果您愿意,也可以使用SVG执行此操作:

var title=document.querySelector('h1'),text=title.innerHTML,svgTemplate=document.querySelector('svg'),charStyle=svgTemplate.querySelector('#text');svgTemplate.style.display=“块”;var空间=0;对于(var i=0;i<text.length;i++){var x=charStyle.cloneNode();x.text内容=文本[i];svgTemplate.appendChild(x);x.setAttribute('x',空格);space+=x.clientWidth||15;}title.innerHTML=“”;title.appendChild(svgTemplate);<svg style=“display:none;height:100px;width:100%”xmlns=“http://www.w3.org/2000/svg“xmlns:svg=”http://www.w3.org/2000/svg“xmlns:xlink=”http://www.w3.org/1999/xlink“版本=”1.1“><defs id=“FooDefs”><linearGradient id=“MyGradient”x1=“0%”y1=“0%”x2=“100%”y2=“0”><停止偏移=“50%”停止颜色=“蓝色”/><停止偏移=“50%”停止颜色=“红色”/></linearGradient></defs><text y=“50%”id=“text”style=“font-size:72px;fill:url(#MyGradient)”></text></svg><h1>这不是解决方案X</h1>

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

是的,您可以只使用一个字符和CSS:

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

h1小时{显示:内联块;边距:0;/*用于演示片段*/线条高度:1em;/*用于演示片段*/字体系列:helvetica,arial,sans-serif;字号:粗体;字体大小:300px;背景:线性梯度(向右,#7db9e8 50%,#1e5799 50%);背景剪辑:文本;-webkit文本填充颜色:透明;}<h1>X(X)</h1>

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

利用背景剪辑的一个不错的解决方案:文本支持: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;
}

所有解决方案都是通过拆分字母并将其包装在<span>中来实现的。我们不必将字母分成两种情况:

如果字体是单空格。如果使用垂直布局。

第二部分{字体大小:80px;字号:粗体;颜色:透明;填充:0;边距:0;背景:线性梯度(90度,rgb(34,67,143)0%50%,#409FBF 50%);背景剪辑:文本;-webkit背景剪辑:文本;}一{字体系列:'Nova Mono';背景重复:repeat-x;背景大小:45px;}.2个{字体系列:'Gideon Roman';写入模式:垂直lr;文本方向:直立;字母间距:-35px;高度:500px;}<!-- 获取字体--><link rel=“preconnect”href=“https://fonts.googleapis.com"><link rel=“preconnect”href=“https://fonts.gstatic.com“交叉原点><link href=“https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap“rel=”stylesheet“><link href=“https://fonts.googleapis.com/css2?family=Gideon+Roman&display=swap“rel=”stylesheet“><div id=“one”class=“one”>X-RAY冬季</div><div class=“two”>最小</div>

字体不可用时的预期输出:

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