javascript - 我怎样才能让这个背景始终响应

Question

你好，我做了一个网站，创建了一种油漆飞溅的背景。我用 jquery 和 css 动画制作它，因为飞溅应该从中心生长并且它不能很好地与 jquery 一起工作。我正在使用 jquery 来启动动画并将其删除。现在我的问题是我给了一个 % top 和 left 的位置，但缺点是如果网站从高度或宽度改变，飞溅的位置不再正确有没有人有解决方案，这样背景总是保持总是填满？ 这是我从中得到这个想法的网页:www.locus-solus.it/en/

下载链接:https://drive.google.com/open?id=0B46vx3bf61vldjVRTTVXQnp4SFU

希望我说得足够清楚。

编辑:

我已经使用了很多媒体查询来修复它，如果你删除媒体查询，你可以看到网页在其他设备上发生了什么，或者将网页的高度设置为 400，你也会看到它没有填满整个网页。

所以也许有人知道这些人是怎么做到的:http://www.locus-solus.it/en/

我使用 img 标签加载 img。

Answer 1

解决方案 1 如果您使用 css 背景属性设置图像，您提供的网站使用单独的图像用于移动和桌面 View ，这是使用媒体查询实现的

HTML:

<div class="page-header"></div>

CSS

 .page-header {
    background: url('images/normal.png');
    }

    @media (max-width: 767px) {
  .page-header {      
  background: url('images/normal-mobile.png');
  }
}

更新的解决方案 2:

如果您使用 html 图像标签 (img) 设置图像，则使用媒体查询根据设备宽度隐藏图像

<div class="my-class">
   <img src="image-desktop.jpg" class="hidden-phone">
   <img src="image-mobile.jpg" class="hidden-desktop">
</div>

这是根据设备宽度隐藏的CSS

.hidden-phone{
     visibility: hidden;
  }
.hidden-desktop{
      visibility: visible;
 }
@media (max-width: 767px) {
   .hidden-phone{
     visibility: visible;
    }
    .hidden-desktop{
      visibility: hidden ;
    }
}