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

Question

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

Возможно ли это с помощью CSS только с Google Chrome? Мне нужно только настроить таргетинг на этот браузер.

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

Спасибо

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