我怎样才能让这个背景alwasys响应

时间:2017-03-14 08:46:59

标签: javascript jquery html css css-animations

您好我创建了一个创建一种油漆飞溅背景的网站。我使用jquery和css动画制作它,因为飞溅应该从中心增长,并且它与jquery不兼容。我正在使用jquery来启动动画并将其删除。现在我的问题是我给了一个%顶部和左边的位置,但缺点是,如果网站从高度或宽度变化,飞溅的位置不再正确,是否有人有解决方案,以便背景总是保持填满? 这是我从以下网站获取此内容的网页:www.locus-solus.it/en /

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

我希望我足够清楚。

编辑:

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

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

我使用img标签加载img。

4 个答案:

答案 0 :(得分:1)

您可以将background-size: cover用于此

//element-selector {
    background-size: cover;
}

如果您使用img标记加载图片,则可以添加max-width:100%

//element-selector {
    max-width: 100%;
}

答案 1 :(得分:1)

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

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 ;
    }
}

答案 2 :(得分:0)

你无法通过css获得fullbody元素的响应高度,你只能找到错误的解决方法。

但是如果你愿意,你可以通过javascript获取窗口宽度和窗口高度并在背景上设置它们!

为了尽可能提高响应速度,您可以在窗口调整大小上执行此操作^^

答案 3 :(得分:0)

我在项目中总是做的方法是制作两个版本的图像。 肖像和风景版本。要做到这一点,你可以使用photoshop及其裁剪和图像大小调整工具。并使用此代码...

HTML:

<div class="your-class">...</div>

CSS:

.your-class {
  background-size: cover; /* It means 'feat to screen' */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Force the code to don't repeat the background image */
}

@media screen and (orientation:portrait) {
  .your-class {
    background-image: url(img/background-portrait.png); /* For portrait screens */
  }
}

@media screen and (orientation:landscape) {
  .your-class {
    background-image: url(img/background-landscape.png); /* For landscape screens */
  }
}

对于您在编辑中标记的网站... 设计师使用几个“div”和“img”标签并将它们浮动到页面中。 您可以使用“绝对定位”和“z-index”创建类似的内容。