El uso de CSS, puede Google Chrome crear un efecto de canales alfa similar a un PNG de 24 bits?

Question

Puede hacer algunos trucos que utilizan un PNG de 24 bits, que tiene un gradiente de opaco a transparente por completo. Elementos de deslizamiento por debajo de esta PNG aparecerán a desaparecerá mientras la decoloración .

¿Es posible el uso de CSS únicamente con Google Chrome? Sólo tengo que apuntar a este navegador.

I gustaría evitar una rebanada de 1px elementos altos con diferentes conjunto opacity.

Gracias

Answer 1

Sí se puede, sólo tiene que utilizar un -webkit-gradient con valores alfa como imagen de fondo:

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

Y si usted está apuntando Chrome, también se puede utilizar :before y :after añadir los gradientes si quería. Aquí está un ejemplo rápido. Puede ver en vivo en CSSDesk (Este método funciona en un montón más de Chrome, pero se rompe en FF 3.0 y simplemente no funciona en varias versiones de 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)));
}