Можно ли анимировать прозрачность CSS-фона? - PullRequest
Новая
       16

Можно ли анимировать прозрачность CSS-фона?

2 голосов
/ 10 декабря 2010

CSS / Javascript - не моя сильная сторона, поэтому я хотел бы спросить, возможно ли изменить непрозрачность фонового изображения, скажем, до 0,5.

У меня есть div с 

background-image: url(images/nacho312.png);
background-position: -50px 0px;
background-repeat: no-repeat no-repeat;

но когда я загружаю определенный вид, он выглядит не очень хорошо, поэтому я хочу иметь эффект "полуоткрытия" при отображении этого вида. Возможно ли это?

Спасибо

Ответы [ 3 ]

4 голосов
/ 10 декабря 2010

Вот начало. 

var element = document.getElementById('hello'),
    targetOpacity = 0.5,
    currentOpacity,
    interval = false,


interval = setInterval(function() {

   currentOpacity = element.getComputedStyle('opacity');

   if (currentOpacity > targetOpacity) {
      currentOpacity -= 0.1;
      element.style.opacity = currentOpacity;

   } else {
      clearInterval(interval);
   }


}, 100);

См. На jsFiddle .

Запустите это на window.onload = function() { } или исследуйте кросс-браузер на событиях, готовых к DOM.

Конечно, с такой библиотекой, как jQuery, гораздо проще. 

$(function() {
   $('hello').fadeTo('slow', 0.5);
});

Это зависит от того, как наследники вашего контейнера наследуют непрозрачность. Делать это, не влияя на них, немного болезненно, поскольку вы не можете сбросить непрозрачность для детей с помощью opacity: 1.

3 голосов
/ 10 декабря 2010

Если вы хотите плавно анимировать и не выполнять слишком много дополнительной работы - это хорошая задача для jQuery (или другой подобной библиотеки).

С jQuery вы можете сделать :

$('#id_of_div').fadeTo('fast', 0.5);

Чтобы получить быстрый анимированный эффект затухания для соответствующего DIV.

Обновление: , если вы хотите на самом деле затухать фоновое изображение, но не любое содержимое переднего планаиз DIV, это намного сложнее.Я бы рекомендовал использовать один контейнер DIV с позицией: относительный и два внутренних DIV с позицией: абсолютный;,Первый из внутренних DIV может иметь фоновое изображение и более низкий z-индекс, чем второй из DIV, а второй DIV будет содержать любой текст и т. Д. Для отображения на переднем плане.При необходимости вы можете вызвать $('#id_of_first_div').fadeTo('fast', 0.5);, чтобы исчезнуть только DIV, содержащий фоновое изображение.

Кстати, буквальный ответ на ваш вопрос «Нет, вы не можете анимировать непрозрачность фонового изображения CSS» -вы можете (в настоящее время) анимировать непрозрачность элемента DOM, а не его атрибутов, поэтому требуется вышеуказанный хак.

Другое обновление: , если вы хотите избежать использования каких-либо третьихВ партийной библиотеке вы можете справиться с исчезновением фонового DIV, используя подход в Alex's answer .

1 голос
/ 10 декабря 2010 
background-image: url(images/nacho312.png);
background-position: -50px 0px;
background-repeat: no-repeat no-repeat;

opacity:0.5; //for firefox and chrome
filter:alpha(opacity=50); //for IE
...