我可以用jQuery淡入背景图片（CSS：background-image）吗？ [英] Can I fade in a background image (CSS: background-image) with jQuery?

问题描述

我有一个 div 元素，文本和背景图片，通过CSS属性设置 background-image 。是否可以通过jQuery淡入背景图片？

I have a div element with text in it and a background image, which is set via the CSS property background-image. Is it possible to fade in the background image via jQuery?

HTML：

<div>Text</div>

CSS：

div {
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);
   border: 1px solid #666;
   height: 10em;
}

EDIT

我做了一个小提琴来演示我的场景。基本上，这配置了一个初始 background-image 和转换，并更改 image 使用jQuery。在我的测试中，两个图片之间没有动画过渡。

I've made a fiddle exemplifying my scenario. Basically, this configures an initial background-image and a transition, and changes the background-image with jQuery. In my testing there is no animated transition between the two images.

EDIT2

我修改了小提琴的作品！

推荐答案

可能不是使用jquery，但是可以使用css3过渡看这个例子：

Probably not with jquery but you can with css3 transitions see this example:

http://css3.bradshawenterprises.com/cfimg/

也看到这个答案

CSS3 Fade Effect

这篇关于我可以用jQuery淡入背景图片（CSS：background-image）吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！