Сделать фон исчезает / в

Question

Можно ли как-нибудь использовать CSS3 для плавного увеличения или уменьшения сплошного белого фона <div>? содержимое должно оставаться видимым, поэтому фон должен исчезать.

Есть идеи, использующие переходы / преобразования css3?

спасибо за вашу помощь.

Answer 1

Конечно, вы можете использовать свойство перехода непосредственно на background-color:

div {
   background-color: white;    

   /* transition the background-color over 1s with a linear animation */
   transition: background-color 1s linear;
}

/* the :hover that causes the background-color to change */
div:hover {
   background-color: transparent;      
}

Вот пример красного фона, исчезающего на :hover.

Answer 2

Это может оказаться полезным для примеров исчезновения цвета изображения и фона: - http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

Однако использование CSS 3 для перехода ограничит эффект браузерами, которые его не поддерживают.*

Answer 3

Вы можете иметь два divs в одном контейнере.Первый div содержит белый фон, второй получает содержимое.

Затем используйте преобразование CSS3, чтобы оживить непрозрачность первого div до нуля.