Question

我想从我网站上的背景图片进行转换。我使用了JQuery。

但是，图像必须具有COVER效果。但我不能这样做。

我用这个例子来制作图片封面： 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，但即便如此，这种情况也非常罕见。

通常的做法是在background-image或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);

如何使用background-image COVER在图像之间进行转换？

2 个答案: