web-dev-qa-db-ja.com

CSSを使用して、グラデーションマスクを適用して、テキスト上で背景にフェードできますか?

全画面固定の背景画像があります。おそらくdivの上部のみで背景にグラデーションマスクを適用することにより、スクロールdivのテキストを上部でフェードアウトさせたいと思います。ユーザーが下にスクロールするとテキストが消えていくように見えるのに興味がありますが、実際にテキストを読むための完全な不透明度の大きな領域がまだあります。

私はウェブキットにマスキングオプションがあることを知っていますが、ページの背景にフェードスルーする方法を見つけることができませんover要素の小さな部分への勾配。

目的の結果の画像を次に示します。

41
aviemet

私はこれとまったく同じことを疑問に思っていました。ソリューションは実際には非常に簡単です。これはもちろん非常に最新の機能ですが、ブラウザーの互換性にこだわっています。

Webkitは、CSSの1行でこれを処理できます。

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

(新しい標準化された方法は、新しい構文を使用してmask-imagelinear-gradientを使用します。 mask-image および linear-gradient 。)

これにより、適用する要素の下部10%がフェードアウトし、画像としても使用しません。 padding-bottom: 50%を追加して、スクロール対象がさらにある場合にのみコンテンツがフェードするようにすることができます。

ソース: http://www.webkit.org/blog/181/css-masks/

ただし、Mozilla(Gecko)のフォールバックは少し複雑です。 「マスク」機能を使用できますが 、これにはSVGイメージが必要です。あなたは base64をあなたのスタイルシートに埋め込むことを試みることができます ... 今すぐFirefoxでmask-imageを使用してください。

67

単色にフェードしている場合は、psudo要素を使用できます。

.image-container {
    position: relative;
    display: inline-block;
  }

.image-container:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 55%;
  bottom: 0;
  background: -webkit-linear-gradient(transparent, #FFF) left repeat;
  background: linear-gradient(transparent, #FFF) left repeat; 
}
<div class="image-container">
  <img src="https://photosharingsites.files.wordpress.com/2014/11/tiger-wild-cat-animal-winter-snow-wallpapers-free-backgrounds.jpg?w=474&h=344" alt="don't shoot me">
  </div>
12
ecolema

モダンなmask-imageおよびlinear-gradientプロパティを使用してこれを行う方法を次に示します。残念ながら、2018年には、すべてのブラウザーで完全にサポートされているわけではありません。 ( mask-image および linear-gradient についてはcaniuse.comを参照してください。)

このコードスニペットでは、html要素にオレンジと黄色のグラデーション背景を指定し、このメソッドが実際の透明度を使用し、その下の要素を背景として使用していることを証明しました。

html {
  background: linear-gradient(to right, orange, yellow, orange);
  height: 100%;
}
div {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}
<div>
One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten
One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten
</div>
7
Flimm

私があなたが望むものを正しく理解していると仮定すると、画像の上部300ピクセルを複製し、Photoshopで透明グラデーションを適用できます(上部を完全に不透明にし、下部を完全に透明にします)。

次に、この画像をdivまたは固定画像の上部に固定されているが高いz-index。次に、メインテキストは背景上でスクロールしますが、divオーバーレイの下にあり、オーバーレイが画面上部に向かって不透明になるにつれてフェードアウトします。

1
Gareth