L'utilisation de CSS, peut Google Chrome créer un canaux alpha effet similaire à un PNG 24 bits?

Question

Vous pouvez faire quelques trucs sympas en utilisant un PNG 24 bits, ce qui a un gradient d'opaque à complètement transparent. Les éléments coulissants sous ce format PNG sembleront disparaissent tout fading .

Est-ce possible en utilisant CSS seulement avec Google Chrome? Je ne cibler ce navigateur.

Je voudrais éviter une tranche de 1px éléments de grande taille avec différents set opacity.

Merci

Answer 1

Oui il peut, il suffit d'utiliser un -webkit-gradient avec des valeurs alpha que l'image de fond:

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)));

Et si vous visez juste Chrome, vous pouvez également utiliser :before et :after pour ajouter les gradients si vous voulez. Voici un exemple rapide. Vous pouvez voir en direct sur CSSDesk de (Cette méthode fonctionne dans beaucoup plus que Chrome, mais des ruptures dans FF 3.0 et ne fonctionne pas dans un certain nombre de versions 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)));
}