41

乾杯！

私はCSS/HTMLの初心者ですが、下の画像のように、テキストにグラデーションを適用したいと思います。どうすればcssで実装できますか？

  ここに画像の説明を入力してください

4

3 に答える 3

73

関連するCSSは、私が使用:afterした<article>ラッパーの疑似要素にあります

article {
  position: relative;
}

article:after {
  position: absolute;
  bottom: 0;  
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(to top,
     rgba(255,255,255, 1) 20%, 
     rgba(255,255,255, 0) 80%
  );
  pointer-events: none; /* so the text is still selectable */
}
  <article>
      <p>
         Had you stepped on board the Pequod at a certain juncture 
         of this post-mortemizing of the whale; and had you strolled
         forward nigh the windlass, pretty sure am I that you would
         have scanned with no small curiosity a very strange, enigmatical 
         object, which you would have seen there, lying along lengthwise 
         in the lee scuppers. Had you stepped on board the Pequod at a certain 
         juncture of this post-mortemizing of the whale; and had you strolled
         forward nigh the windlass, pretty sure am I that you would
         have scanned with no small curiosity a very strange, enigmatical 
         object, which you would have seen there, lying along lengthwise 
         in the lee scuppers.
      </p>
  </article>

于 2013-01-24T11:37:40.020 に答える
16

ChromeやSafariなどのWebkitベースのブラウザでのみサポートされるCSS3テキストグラデーション。私は3つの異なる方法を使用しました。最初にこのフィドルを確認してくださいhttp://jsfiddle.net/sarfarazdesigner/pvU7r/ これを試してください

.article{
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

これはChromeで正常に動作しています。他のブラウザがどのように反応するかわかりません。http://css-tricks.com/snippets/css/gradient-text/から取得した参照

于 2013-01-24T12:09:04.053 に答える
0

プレフィックスを追加する必要があるかもしれませんが、 mask-imageプロパティを使用してこれを行うこともできます。-webkit-

article {
  -webkit-mask-image: linear-gradient(0deg, transparent 16px, red 66px);
  /* 0deg = down, 90deg = left, 180deg = top, 270deg = right */
}
  <article>
      <p>
         Had you stepped on board the Pequod at a certain juncture 
         of this post-mortemizing of the whale; and had you strolled
         forward nigh the windlass, pretty sure am I that you would
         have scanned with no small curiosity a very strange, enigmatical 
         object, which you would have seen there, lying along lengthwise 
         in the lee scuppers. Had you stepped on board the Pequod at a certain 
         juncture of this post-mortemizing of the whale; and had you strolled
         forward nigh the windlass, pretty sure am I that you would
         have scanned with no small curiosity a very strange, enigmatical 
         object, which you would have seen there, lying along lengthwise 
         in the lee scuppers.
      </p>
  </article>

于 2021-09-20T05:24:49.033 に答える