主页 / 问题 / 702263
Accepted
federk
Asked:2020-08-05 18:03:22 +0000 UTC2020-08-05 18:03:22 +0000 UTC

css+html是否可以制作双色字体字母？

  • 772

根据这个原则，有必要在页面上制作两个（可能还有三个）彩色字母：

双色字母

会有很多字母和不同的颜色，我不想使用图像。请告诉我，是否可以使用 CSS 和 HTML 来做到这一点（好吧，如果第一个还不够，JavaScript 也可以提供帮助）？

html

4 个回答

  1. 所以？

    h1 {
  font-size: 72px;
  width:  50px;
  background: -webkit-linear-gradient(left, red 49%, blue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
    <h1>A</h1>

    UPD：添加了垂直划分。不是最理想的解决方案，也许有人会提供更好的解决方案。

    UPD2：横版我也不说了，你永远不知道谁会派上用场。

    h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(red 49%, blue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
    <h1>A</h1>

    UPD3： 3 种颜色的代码

    h1 {
  font-size: 72px;
  width:  50px;
  background: -webkit-linear-gradient(left, red 30%, green 30%, green 60%, blue 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
    <h1>A</h1>

    • 13
  2. Best Answer

    也作为一种选择

    h1 {
  font-size: 72px;
  width:  50px;
  color: blue;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
h1:before,
h1:after{
    content: 'A';
    position: absolute; top: 0; left: 0;
    color: red;
    width: 50%;
    overflow: hidden;
}

.gradient-3:before,
.gradient-3:after{
    width: 33.333%;
}
.gradient-3:after{    
    left: 50%;
    color: green;       
    transform: translateX(-50%);
    text-align: center;        
    text-indent: -33.333%;
}
/* hack for ff */
@-moz-document url-prefix() { 
  .gradient-3:after {
     text-indent: -100%;
  }
}
    <h1>A</h1>
<h1 class="gradient-3">A</h1>

    • 11

  3. 使用伪元素，可以在属性中复制文本，而不仅仅是单个字母。

    该方法的本质是通过 将文本克隆为伪元素content: attr(data-text)，使文本本身透明并仅显示 和 中的:before文本:after。然后剩下的只是将它们分散到块的不同部分并设置一个负数z-index，以便可以正常选择文本。

    p[data-text] {
  position: relative;
  font-size: 45px;
  color: transparent;
  font-weight: bold;
}

p[data-text]:before,
p[data-text]:after {
  position: absolute;
  content: attr(data-text);
  left: 0;
  bottom: 0;
  color: #000;
  height: 50%;
  overflow: hidden;
  z-index: -1;
}

p[data-text]:before {
  line-height: 0;
}

p[data-text]:after {
  top: 0;
  color: red;
}
    <p data-text="Doublecolor text">Doublecolor text</p>

    • 8

  4. 对于跨界工作并且不摆弄绝对定位的元素，请使用 SVG：

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150" width="200" height="200">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="52%" style="stop-color:rgb(255,0,0);" />
      <stop offset="52%" style="stop-color:rgb(0,0,255);" />
    </linearGradient>
  </defs>
  <text x="0" y="150" textLength="150" lengthAdjust="spacingAndGlyphs" font-family="Arial Black, Arial" font-size="200" fill="url(#gradient)">
    A
  </text>
</svg>

    这里基本上很简单，只是使用缩进渐变。

    • 6

相关问题