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

问题描述

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

HTML：

 < div>文字< / div> 
  

CSS：

 code> div {
 background-repeat：no-repeat; 
 background-position：center; 
 background-size：contains; 
 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。在我的测试中，两个图片之间没有动画过渡。

EDIT2

我修改了小提琴的作品！

解决方案

可能不是使用jquery，但是可以使用css3转换查看这个例子：

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

也看到这个答案

CSS3 Fade Effect

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

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

My revised fiddle works!

解决方案

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

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

also see this answer

CSS3 Fade Effect

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