Question

我正在尝试将多个背景图像加载到另一个上面。实现这一目标的理想方法是什么？

我说背景图片是因为我更喜欢使用background-size: cover，因为它可以在所有设备上很好地扩展。我希望这是响应式的，但图像应该放在您在示例中看到的确切建筑物的顶部。

我想要淡入并叠加在顶部的图像具有相同的尺寸。

#hero {
  background: url('https://earthview.withgoogle.com/download/6139.jpg') no-repeat center center;
  background-size: cover;
  height: 100vh;
}

我还考虑过使用sprites，但文件大小对于背景图片来说不会太大吗？

Answer 1

如果您想淡入新图片，则无法直接使用相同的#hero div，因为没有像背景不透明这样的属性。它需要一个新的元素，它将在它自己的褪色。通过用逗号分隔url s来堆叠背景的可能性，两个重叠图像只需要一个元素。我认为使用伪元素是一个很好的接触：

Demo

#hero {
  position: relative;
  background: url(//earthview.withgoogle.com/download/6139.jpg) center;
  background-size: cover;
  height: 100vh;
}

#hero:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-image:
  url(//f.cl.ly/items/3p1k0e0j3Y0F2r1N3B00/1.png),
  url(//f.cl.ly/items/1h3l3b0k3X1s1A272m23/2.png);
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 5s;
}

#hero.fadein:before {
  opacity: 1;
}

这里使用了一小部分jQuery来确保在加载内容时应用淡入淡出：

$(window).on('load', function() {

  $('#hero').addClass('fadein');
});

编辑 - 这是一个有两个伪和一些可以切换淡入淡出的按钮的例子：

Pen

Answer 2

我之前有一个简单的js script + css用于类似项目，我认为这就是你要找的东西。它就像这样：

<强> HTML：

<body>
  <div id="BG"></div>
  <div class="content">
    Your content goes here
  </div>
</body>

<强>的CSS：

body{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}

#BG{
  height: auto;
  background-image: url('http://www.hdwallpaperscool.com/wp-content/uploads/2013/10/top-beach-hd-wallpaper.jpg');
  background-repeat: no-repeat;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.content{
  font-size:22px;
  font-weight: bold;
  color:#F3D026;
  line-height: 24px;
}

<强>的javascript：

var imgArr = new Array(
    'http://www.hdwallpaperscool.com/wp-content/uploads/2013/10/top-beach-hd-wallpaper.jpg',
    'http://www.hdwallpapersnew.net/wp-content/uploads/2015/09/awesome-sea-wide-hd-wallpaper-images-full-free.jpg',
    'http://www.hdwallpapersnew.net/wp-content/uploads/2015/09/beautiful-sea-wide-hd-desktop-background-wallpaper-photos-full-free.jpg'
);

var nextBG = 0;
var BGPath = imgArr[nextBG];

$(document).ready(function(){
  // ### Autoload BG images
  var preloadArr = new Array();
  for (var i = 0; i < imgArr.length; i++){
    preloadArr[i] = new Image();
    preloadArr[i].src = imgArr[i];
  };

  // ### Random background switcher
  setInterval(BGSwitch, 5000);
});

// BG SWITCH
function BGSwitch(){
  //Set the background
  $('body').css('background-image', 'url('+BGPath+')');

  //Increment BG
  if(nextBG >= imgArr.length - 1)
    nextBG = 0;
  else
    nextBG++;

  //make bg invisible
  $('#BG').css('opacity', 0);

  //set new bg
  BGPath = imgArr[nextBG];
  $('#BG').css('background-image', 'url('+BGPath+')');

  //hardcode fix the height
  var docH = $(document).height();
  $('#BG').css('height', docH);

  //fade it back in
  $('#BG').fadeTo(1000, 1);
}

您可以看到演示here

在另一个上面加载和淡化多个背景图像

2 个答案: