HTML-增长/过渡图像/颜色以填充整个网页 [英] HTML - Grow/transition image/color to fill entire web page

问题描述

关于此小提琴，当我单击a href时，它是在这种情况下，我希望图像可以从放置它的div开始进行缩放/缩放，以使其充满整个页面.如果无法做到这一点，我想用图像所放置的div的背景色填充页面，并从包含图像的div开始进行颜色的过渡/填充.

With respect to this fiddle, When I click on the a href which is an image in this case, I'd like the image to grow/transition to fill the full page with the transition/scaling starting from the div in which it is placed. If this isn't possible, I'd like to fill page with the background color of the div that the image is placed in with the transition/filling of color starting from the div containing the image.

我尝试应用缩放，变换，覆盖，但无法正确进行.因此，请在这里寻求帮助.该示例中的代码没有我尝试过的过渡，因为它们不起作用；无论如何都无法正常工作.

I tried applying scaling, transform, overlay but can't get it right. hence, requesting help here please. The code in the example doesn't have the transitions I've tried as they don;t work anyway.

我尽我所能地将想像力表达到单词上.如果不清楚的话任何人都愿意提供帮助，请随时提出问题.

I've tried to put my imagination to words much as I can. if this isn't clear & anyone is willing to help, please feel free to ask questions.

推荐答案

我会避免将图像放大到整个HTML正文，因为图像将被像素化并降低浏览器性能.

I would avoid to scale up the image to entire HTML body, because the image will be pixelated and slow down the browser performance.

这是我填写网页颜色的解决方案:

Here is my solution to fill up web page color:

$('.circleDiv').on('mouseenter', 'a', function() {
  $('body').animate({
    backgroundColor: "#09f"
  }, 1000);
});

在此处查看演示

这篇关于HTML-增长/过渡图像/颜色以填充整个网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！