如何使用背景图像COVER在图像之间进行转换

默认情况下，<img>标记是不透明的。除非img是透明的，否则您无法看到<img>标记的background-image，但即便如此，这也是非常罕见的。

通常的做法是在block或inline-block元素上设置background-image属性，通常包含正常页面内容，这些内容将在背景图像上方呈现。

以下是一个简化脚本的尝试，假设这是期望的结果：

注意：您可以向imgs阵列中添加任意数量的图像。

var
  the_target = '.conteudo',
  imgs = [
    "http://www.imagenstop.blog.br/wp-content/gallery/imagens-de-fundo/Imagem-de-Plano-de-Fundo.jpg",
    "http://www.pageresource.com/wallpapers/wallpaper/vintage-blue-rishi-agarwal_2141757.jpg",
    "http://www.wallpapersxl.com/wallpapers/2560x1600/fundo-de-tela-azul/450289/fundo-de-tela-azul-neon-papel-parede-450289.jpg"
  ],
  addBackground = function(i) {
    if (i == imgs.length) i = 0;
    var bgImage = $(the_target + ' .bgImage');
    bgImage.eq(0).fadeOut('slow', function() {
      $(this).remove();
    });
    $(the_target).append($('<div />').css({
      'background-image': 'url("' + imgs[i] + '")'
    }).addClass('bgImage'));
    setTimeout(function() {
      addBackground(i + 1);
    }, 2000);
  };
addBackground(0);

body {
  margin: 0;
}
.conteudo {
  background-color: rgba(0, 0, 0, .35);
  color: white;
  padding: 3px 20px;
  position: relative;
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
}
.conteudo>.bgImage {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  z-index: -1;
  top: 0;
  left: 0;
}
.conteudo>.bgImage:last-child {
  z-index: -2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conteudo">
  <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
    blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
  <p>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain
    circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.</p>
  <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
    blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
  <p>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain
    circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.</p>
</div>

您不应该将背景图像放置在实际的图像元素上。我很难想象它应该是什么样子，但我认为将图像元素更改为div将是一个好的开始。

$('.conteudo').html('<img src='""+imgs[id]+"'" width='"50%'" height='"100%'" class='"bg'"/>');
$('.conteudo').fadeIn(500);",250);

类似

$('.conteudo').html('<div style='"background-image:' + imgs[id] + ';'" width='"50%'" height='"100%'" class='"bg'"></div>');
$('.conteudo').fadeIn(500);",250);