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>

patternSVGの a に画像を使用できます。

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

画像へのリンクです。

あなたが望むものに変更するだけです。

それに続くwidthheightは、複製されるイメージのサイズを制御します。

楽しんで。</p>

于 2012-12-28T16:29:36.767 に答える
1

1 つの方法は、各文字をスパン要素でラップし、スパンに色を適用することです。各文字には独自の色があります。

<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 に答える