Используя только CSS, могу ли я использовать только альфа-канал PNG? - PullRequest
Новая
       53

Используя только CSS, могу ли я использовать только альфа-канал PNG?

4 голосов
/ 20 августа 2011

У меня есть это красное PNG-изображение с переменной прозрачностью, но мне нужно отобразить его на веб-странице в виде белого цвета с переменной прозрачностью.Я думаю, есть только два способа, которыми это может работать:

  • Установите цвет фона на белый, но каким-то образом используйте альфа-канал PNG, чтобы установить его прозрачность.
  • Каким-то образомснимите насыщенность PNG или измените его цветовую палитру только на белый.

Мне разрешено использовать только CSS для достижения этой цели;в противном случае, я бы посмотрел на другие варианты.

Редактировать : мне это нужно только для работы в Safari (webkit).Извините, я не упоминал об этом раньше.

Ответы [ 3 ]

6 голосов
/ 20 августа 2011

Запрошенный ответ:

-webkit-mask может сделать снимок и использовать его альфа-канал в качестве маски (почти как маска для фотошопа) 

div {
  background:white;
  -webkit-mask:url(url/to/image.png);
}

Fiddle

Но я согласен со всеми ответами, предполагающими использование canvas - я знаю, что вы ограничены чистым CSS, но здесь можно использовать canvas.

5 голосов
/ 20 августа 2011

Нет, вы не можете сделать это кросс-браузерным способом, используя только CSS.

(Однако было бы довольно легко сделать это, используя HTML5 Canvas вместе с вашим изображением.)

Решение Canvas :

Этот пример можно посмотреть здесь: http://phrogz.net/tmp/canvas_png_alpha.html

var ctx = document.createElement('canvas').getContext('2d');
var img = new Image;
img.onload = function(){
  // Make the canvas the same size as the image
  var w = ctx.canvas.width  = img.width;
  var h = ctx.canvas.height = img.height;

  // Fill it with (fully-opaque) white
  ctx.fillStyle = '#fff'; ctx.fillRect(0,0,w,h);

  // Draw the image in a special blend mode that forces its opacity on the result
  ctx.globalCompositeOperation = 'destination-in';
  ctx.drawImage(img,0,0);

  // Set an image on the page to use this canvas data
  // The data URI can also be copy/pasted and used inline in HTML or CSS
  document.getElementById('result').src=ctx.canvas.toDataURL();
}

// Load the image to use _after_ setting the onload handler
img.src = 'alphaball.png';

Исходное изображение , чья альфа используется:
A round ball with a couple holes and transparent shadow
Результат (показан на черной странице):
white silhouette on black background

Используемый здесь ключрежим компоновки destination-in для использования непрозрачности исходного изображения в качестве результата, при этом исходные цвета (в данном случае белый) остаются неизменными.

3 голосов
/ 20 августа 2011

В версиях IE менее 9 есть фильтр цветности , который делает это. В других браузерах вам не повезло.

Вы можете использовать тег canvas с некоторым JavaScript, чтобы получить тот же эффект, но это не CSS.

...