How can I smoothly transition CSS background images?

Question

The main solution out there is:

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

But my goal is to build pages that pres

Answer 1

Not clear if you solved that already: For regular images putting another above it (display: inline-block; visibility: hidden;) and listening to the onload of the high-res image will work:

$("high-res").load(function() {
    $(this).css({visibility: "hidden", opacity: 0}).fadeIn("slow");
}

EDIT: The other way around (putting the high-res behind the low-res and then fading out the low-res) also works. But you wont get around overlaying stuff.

Fading in CSS background-images is impossible. They have no opacity value. The only thing you can do is put the contents in a

above an and fading that in the same way.

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...