CSSを使用して、Google Chromeは24ビットPNGと同様のアルファチャネル効果を作成できますか？

Question

24ビットPNGを使用してクールなトリックを作成できます。これは、不透明から完全に透明になるまで勾配を備えています。このPNGの下にスライドする要素が表示されます 衰退中に消えます.

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

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

ありがとう

Answer 1

はい、aを使用するだけです -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)));
}