Question

如何使用CSS创建带有条纹颜色的文本？

将background-image或background-color应用于文字。或者我是否必须下载以这种方式着色的字体？

Answer 1

.striped{
    font-size: 128px;
    background-size: 16px;
    -webkit-background-clip: text;
    color: transparent;
    background-color: #AC0;
    background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, .3) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .3) 75%, transparent 75%, transparent);
}

Great article on striped backgrounds
Alternate method使用背景图片（根据OP的要求）
请注意使用background-clip和background-size
支持background-color:text并非通用，将此解决方案限制为Webkit

Answer 2

这适用于跨（现代）浏览器，包括IE。

我相信svg就是你所追求的：

http://jsdo.it/Raam.Danger.Rosh-Hai/t93l

Striped text

<svg width="12cm" height="4cm" viewBox="0 0 1200 400">
  <desc>Example textdecoration01 - behavior of 'text-decoration' property</desc>
  <rect x="1" y="1" width="1198" height="398" fill="pink"  stroke="blue" stroke-width="2" />
  <g font-size="220"  fill="url(#img2)" stroke="white" stroke-width="1" >
    <text x="100" class="text" y="205">Normal text</text>
   <defs>
    <pattern id="img2" patternUnits="userSpaceOnUse" width="100" height="100">
        <image xlink:href="http://price.sourceforge.net/manual/images/vert_stripes.gif" x="0" y="0" width="130" height="130" />

    </pattern>

</defs>
  </g>
</svg>

您可以在SVG中使用pattern的图像。

 xlink:href="http://price.sourceforge.net/manual/images/vert_stripes.gif"

是图片的链接。

只需将其更改为您想要的内容。

跟随它的width和height可以控制所复制图像的大小。

玩得开心。

Answer 3

一种方法是将每个单个字符包裹在span元素中并将颜色应用于span - 而不是每个字符都有自己的颜色。

<span style="color:red">H</span>
<span style="color:blue">O</span>
<span style="color:green">I</span>

这可以在任何浏览器中使用 - 但这是一个难以维护的地方，或者如果您需要更改文本。

Answer 4

请参阅 demo

h1 {
  font-size: 72px;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.03, rgb(250,3,3)),
    color-stop(0.52, rgb(240,255,127)),
    color-stop(0.76, rgb(42,24,173)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Answer 5

添加实施示例。如果你想在网上玩它，可以在这里找到代码：

https://codepen.io/anon/pen/QEmgbB?editors=1000

<svg  width="188" height="32" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs> 
    <pattern id="style-stripes" width="90" height="64" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0"   x2="90"  y2="0"  style="stroke: #E03A3E; stroke-width:8;" />
      <line x1="0" y1="8"  x2="90"  y2="8" style="stroke: #963D97; stroke-width:8;" />
      <line x1="0" y1="16"  x2="90"  y2="16" style="stroke: #009DDC; stroke-width:8;" />
      <line x1="0" y1="24"   x2="90"  y2="24"  style="stroke: #61BB46; stroke-width:8;" />
    </pattern>
  </defs>
  <g fill="url(#style-stripes)" stroke="none" font-size="32" font-family="serif">
    <text x="0" y="24" style="fill:#333;fill-opacity:1;">Reactive</text>
    <text x="120" y="24">Style</text>
  </g>
</svg>

CSS中的条纹文本

5 个答案: