С помощью CSS может ли Google Chrome создавать эффект альфа-каналов, похожий на 24-битный PNG? - PullRequest
Новая
       34

С помощью CSS может ли Google Chrome создавать эффект альфа-каналов, похожий на 24-битный PNG?

4 голосов
/ 21 июня 2010

Вы можете сделать несколько классных трюков, используя 24-битный PNG с градиентом от непрозрачного до полностью прозрачного. Элементы, скользящие под этим PNG, будут казаться исчезающими при исчезновении .

Возможно ли использование CSS только с Google Chrome? Я только нацелился на этот браузер.

Я бы хотел избежать кусочка элементов высотой 1 пиксель с различным набором opacity.

Спасибо

1 Ответ

5 голосов
/ 21 июня 2010

Да, это возможно, просто используйте -webkit-gradient со значениями Alpha в качестве фонового изображения: 

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