我可以用jQuery淡入背景图像（CSS:background image）吗？

我有一个

div

元素，其中包含文本和背景图像，它是通过CSS属性

background image

设置的。是否可以通过jQuery在背景图像中淡入淡出

div{
背景重复：无重复；
背景位置：中心；
背景尺寸：包含；
背景图片：url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);
边框：1px实心#666；
高度：10公分；
}

---

Text

这样做是不可能的，但您可以在div与背景图像和文本之间覆盖一个不透明div，并淡出该div，从而呈现背景淡入的外观。

您可以根据需要设置不透明度值

div {opacity: 0.4;}

对于

IE

，您可以指定为

div { filter:alpha(opacity=10));}

---

值越低-透明度越高

自Firefox 4以来，您可以通过各种方式淡化背景图像

您的CSS：

.box {
    background: #CCCCCC;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
    }
.box:hover {
    background: url(path/to/file.png) no-repeat #CCCCCC;
    }

您的XHTML：

<div class="box">
    Some Text …
</div>

一些文字…

---

就是这样。

我已经找了很久了，最后我把一切都放在一起，找到了我的解决办法。 人们说，你不能淡入/淡出html背景的背景图像id。这绝对是错误的，通过实现下面提到的演示，您可以发现这一点

CSS:

现在可以使用JavaScript轻松更改身体的背景图像：

switch (dummy)

case 1:

$(document.body).css({"background-image": "url("+URL_of_pic_One+")"});
waitAWhile();

case 2:
$(document.body).css({"background-image": "url("+URL_of_pic_Two+")"});
waitAWhile();

---

这是我的工作，它的纯css

---

css

---

html

---

对于现代浏览器，我更喜欢一种轻量级的方法，带有一点Js和CSS3

transition: background 300ms ease-in 200ms;

请看这个演示：

---

我知道我迟到了，但我找到了一种使用jquery的方法，它可以在每个浏览器上运行（我在chrome、firefox和IE9上测试过），并且始终显示前台元素，而不是css3转换属性

创建2个绝对包装器并使用z索引

首先，将必须位于前场的元素设置为z索引属性值最高的元素，并将其他元素（都包含在主体中，因此：body{}）设置为z索引属性值低于前场元素的元素，至少比前场元素低2个数

HTML部分：

         <div class="wrapper" id="wrapper1"></div>
         <div class="wrapper" id="wrapper2"></div>

我希望我的答案是明确的，如果你需要更多的解释和评论

对不起，我的英语：）

jquery:

 $("div").fadeTo(1000 , 1);

css

html

---

所以。。我也在调查这件事，看到这里的大多数答案都要求淡化容器元素，而不是实际的背景图像。 然后我突然想到了一件事。我们可以提供多个背景，对吗？如果我们覆盖其他颜色，使其透明，如下面的代码-

 background: url("//unsplash.it/500/400") rgb(255, 255, 255, 0.5) no-repeat center;

这段代码实际上是独立工作的。试试看。我们给了一张背景图片，并询问了图片顶部有透明度的其他白色。

---

提示-我们可以提供不同的颜色和透明度以获得不同的过滤效果。

可能重复的问题以及大约一百万个其他问题。@Juhana:这些问题是否与通过CSS属性设置的背景图像有关

背景图像

？此外，它们是否涉及通过JavaScript更改

背景图像

。它只显示了使用jQuery

animate

可以做什么。它也不涉及CSS3选项，但在生产环境中不能依赖CSS3。不过，玩玩也不错。如果它能帮助jQuery:

$（document）.ready（函数（）{var img_array=['home-corps-2.jpg'，'home-epilation.jpg'，'home corps.jpg'，'home ongles.jpg']；var index=0；函数fadeToNext（）{index=（index+1）%img_array.length；$（'headline'）.css（{'s background image':'url（public/img/'+img)数组[index]+''}）；waitNext（）；}函数waitNext（）{setTimeout（function（）{fadeToNext（）；}，3000）；}waitNext（）；}）；

@user2947794:没有“waitawile”代码？如果你有，请发布它。谢谢。效果很好。唯一的批评是旋转不同尺寸的图像时（从纵向到横向，反之亦然）除了淡入淡出的动画外，还会出现拉伸动画。@blumonde你知道不需要这个部分吧？

不透明度的问题在于它也会影响所有的孩子，而不仅仅是背景图像。这对我来说不起作用，尽管我很喜欢这个主意。我使用的是Chrome 86。
         <div class="wrapper" id="wrapper1"></div>
         <div class="wrapper" id="wrapper2"></div>

        .fore-groundElements{              //select all fore-ground elements
                  z-index:0;               //>=0
        }
       .wrapper{
                  background-size: cover;
                  width:100%;
                  height:100%;
                  background-size: 100% 100%;
                  position:absolute;
         }

        #wrapper1{
               z-index:-1; 
        }


        #wrapper2{
                 z-index:-2;
         }
         body{

              height:100%;
              width:100%;
              margin:0px;   
              display:cover;
              z-index:-3                          //<=-3
         }

  $(document).ready(main);

  var main = function(){

             var imgPath=[imagesPath1,..,...];                 // the array in which store the image paths

             var newWrapper;                     // the wrapper to display 
             var currentWrapper;                 //the current displayed wrapper which has to be faded
             var l=2;                             // the next image index  to be displayed, it is set to 2 because the first two position of the array(first two images) start already setted up
             var imgNumber= imgPath.length;        //to know when the images are over and restart the carousel
             var currentImg;                       //the next image path to be displayed


             $('#wrapper1').css("background-image", 'url'+imgPath[0]);         //pre set the first wrapper background images
             $('#wrapper2').css("background-image", 'url'+imgPath[1]);          //pre set the first wrapper background images   

             setInterval(myfunction,3000);                //refresh the background image every three seconds

             function myfunction(){
                    if(l===imgNumber-1){               //restart the carousel if every single image has already been displayed                  
                         l=0;
                     };

             if(l%2==0||l%2==2){                    //set the wrapper that will be displaied after the fadeOut callback function
                  currentWrapper='#wrapper1';         
                  newWrapper='#wrapper2';
             }else{
                  currentWrapper='#wrapper2';
                  newWrapper='#wrapper1';
             };
             currentImg=imgPath[l];
            $(currentWrapper).fadeOut(1000,function(){               //fade out the current wrapper, so now the back-ground wrapper is fully displayed
                  $(newWrapper).css("z-index", "-1");                //move the shown wrapper in the fore-ground
                  $(currentWrapper).css("z-index","-2");             //move the hidden wrapper in the back ground
                  $(currentWrapper).css("background-image",'url'+currentImg);                   // sets up the next image that is now shown in the actually hidden background wrapper
                  $(currentWrapper).show();          //shows the background wrapper, which is not visible yet, and it will be shown the next time the setInterval event will be triggered
                  l++;                         //set the next image index that will be set the next time the setInterval event will be triggered 
             });


         };                   //end of myFunction
  }                          //end of main

 $("div").fadeTo(1000 , 1);

    div {
     background: url("../images/example.jpg") no-repeat center; 
    opacity:0;
    Height:100%;
    }

<div></div>

 background: url("//unsplash.it/500/400") rgb(255, 255, 255, 0.5) no-repeat center;