如何使用背景图像封面在图像之间进行转换？

Question

我想从我的网站上的背景图片转换。我用JQuery做的。

然而，图像必须具有封面效果。但我不能那么做。

我用这个例子来制作图像封面：How to make a background cover a separate div?

之后，我插入Jquery以进行转换，但并不是所有的图像都要覆盖效果。

怎么做这个？

​

    var id = 0;
    var imgs = new Array();
    imgs[0] = "http://www.imagenstop.blog.br/wp-content/gallery/imagens-de-fundo/Imagem-de-Plano-de-Fundo.jpg";
    imgs[1] = "http://wallpaper.ultradownloads.com.br/56263_Papel-de-Parede-Fundo-de-Mosaico-Azul_1920x1200.jpg";
    imgs[2] = "http://www.wallpapersxl.com/wallpapers/2560x1600/fundo-de-tela-azul/450289/fundo-de-tela-azul-neon-papel-parede-450289.jpg";

     //ADD IMAGES
    function troca() {
      if (id < imgs.length - 1) {
        id++;
      } else {
        id = 0;
      }
      $(".conteudo").fadeOut(250);
      setTimeout("$('.conteudo').html('<img src="\" + imgs[id] + "\" width=\"50%\" height=\"100%\" class=\"bg\"/>');$('.conteudo').fadeIn(500);", 250);
    }
    var segundos = 3;
    setInterval("troca();", segundos * 2000);

.conteudo {
  width: 100%;
  height: 100%;
  background: url('http://www.imagenstop.blog.br/wp-content/gallery/imagens-de-fundo/Imagem-de-Plano-de-Fundo.jpg') no-repeat;
}
img.bg {
  background-image: url('http://www.imagenstop.blog.br/wp-content/gallery/imagens-de-fundo/Imagem-de-Plano-de-Fundo.jpg');
  */ background-size: cover;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="visible-sm visible-md visible-lg conteudo" style="width:100%; height:100%;"></div>

​

Answer 1

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

通常的做法是在block或inline-block元素上设置一个属性，通常保存正常的页面内容，内容将在上方的上呈现为背景图像。

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

注意:您可以向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>

​

Answer 2

您不应该将背景图像放在实际的图像元素上。我很难想象这是什么样子，但我认为将图像元素转换为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);