如何平稳过渡CSS背景图像? [英] How can I smoothly transition CSS background images?

问题描述

主要解决方案是:

只要向上加载页面，直到页面加载完毕."

"Just throw a loading screen up until the page is loaded".

但是，我的目标是建立可以快速呈现基本知识的页面，而无需加载屏幕，然后在准备好图像和精美功能时进行过渡.因此，我将等它加载完毕，然后将其淡入.或者我将加载非常低分辨率的版本，然后在准备就绪时逐渐降低高分辨率.

But my goal is to build pages that present the basics very quickly, without a loading screen, and then transition in the images and fancy features when they're ready. So I'll wait till it's loaded, and then fade it in. Or I'll load in a very low res version and then fade in the high res when it's ready.

我还没有弄清楚这种做法的一个方面是如何对背景图片进行处理.

The one aspect of this practice that I have not yet figured out is how to do it with background images.

如何获得背景图片平滑淡入的效果?

我愿意使用:

• JavaScript
• jQuery
• 任何现代JQuery库
• CSS技巧/"hacks"

但我想避免:

• 使用叠加元素并将其淡入顶部.

推荐答案

如@dandavis的注释中所述，实际上有一个CSS过渡属性:background-image.

As noted in the comments by @dandavis, there's actually a CSS transition property : background-image.

1. 创建两张尺寸相同的背景图像 :一张透明的图片，这是有意的.(如果您没有使它们具有相同的大小，则您将获得这种效果！)；

1. create two background images of the same size: one transparent & one that's intended. (If you don't make them the same size, you'll get this effect!);

使用 transition:背景图像1s 引起过渡效果

使用Javascript预加载图片，并在准备好时重置背景图片.CSS将负责其余的工作.

use Javascript to preload the image and reset the background image when it's ready. CSS will take care of the rest.

值得注意的限制

• 这不允许进行 background-size 操作(这会导致非常奇怪的效果).

  如上所述，图像必须具有相同的大小.

  The images, as mentioned, must be the same size.

  工作示例

  var image = new Image();
  image.onload = function () {
          $(".element").css("background-image", "url('" + image.src + "')");
  }
  
  image.src = "https://c1.staticflickr.com/3/2439/3728897793_ff1c78c5d9.jpg"; //image to be transitioned to

  html{
      width:100%;
      height:100%;
  }
  body{
      width:100%;
      height:100%;
      padding:0px;
      margin:0px;
  }
  .element{
      width:100%;
      height:100%;
      background-image:url('http://i.imgur.com/HRV3DsM.jpg');
      -webkit-transition: background-image 5s;
  }

  <div class="element">
  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  这篇关于如何平稳过渡CSS背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！