您好我创建了一个创建一种油漆飞溅背景的网站。我使用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。
答案 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”创建类似的内容。