css - CSS を使用して、Google Chrome は 24 ビット PNG に似たアルファ チャネル効果を作成できますか?

Question

不透明から完全な透明までのグラデーションを持つ 24 ビット PNG を使用して、いくつかのクールなトリックを作成できます。この PNG の下をスライドする要素は、フェードしながら消えていくように見えます。

Google Chrome でのみ CSS を使用してこれを行うことは可能ですか? このブラウザをターゲットにするだけです。

opacityさまざまなセットを持つ高さ 1px の要素のスライスを避けたいと思います。

ありがとう

Answer 1

はい、でき-webkit-gradientます。背景画像としてアルファ値を使用するだけです。

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,1)),color-stop(1, rgba(255,255,255,0)));

また、Chromeをターゲットにしているだけの場合は、必要に応じてグラデーションを使用:beforeして追加することもできます。:afterこれが簡単な例です。CSSDeskでライブで 表示できます（この方法はChromeよりもはるかに機能しますが、FF 3.0では機能せず、多くのIEバージョンでは機能しません）：

div {
  position: relative;
}

div:before, div:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
}


div:before {
  top: 0;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,1)),color-stop(1, rgba(255,255,255,0)));
}


div:after {
  bottom: 0;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(1, rgba(255,255,255,1)),color-stop(0, rgba(255,255,255,0)));
}