3

如何使用 CSS 使文本具有条纹颜色？

类似于background-image或background-color应用于文本的东西。还是我必须下载以这种方式着色的字体？

4

5 回答 5

2

演示：http: //jsfiddle.net/LMg7q/2/

.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);
}
于 2012-12-28T16:07:48.077 回答
2

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

我相信 svg 是你所追求的：

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

条纹文本

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

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

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

是图片的链接。

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

和跟随它控制被复制width的height图像的大小。

玩得开心。​</p>

于 2012-12-28T16:29:36.767 回答
1

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

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

这适用于任何浏览器——但维护起来很麻烦，或者如果您需要更改文本。

于 2012-12-28T15:59:28.663 回答
1

看演示 

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;
}
于 2012-12-28T15:59:49.740 回答
0

添加到实现示例。如果您想在线玩，可以在这里找到代码：

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

SVG 条纹文本

<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>
于 2016-07-21T04:14:00.120 回答