Html 移动设备中的视差
我正在建立一个使用视差背景的网站。它在我的Mac上的Safari和Chrome中运行得很好,但是背景尺寸:封面在移动设备上根本不起作用。 图片被放大,视差功能被禁用 我一直在寻找一个简单的解决方案,但在任何地方都找不到。 只要背景图片有合适的尺寸,我很乐意失去移动设备上的视差功能 帮忙? 附加基本代码 HTML:Html 移动设备中的视差,html,css,parallax,Html,Css,Parallax,我正在建立一个使用视差背景的网站。它在我的Mac上的Safari和Chrome中运行得很好,但是背景尺寸:封面在移动设备上根本不起作用。 图片被放大,视差功能被禁用 我一直在寻找一个简单的解决方案,但在任何地方都找不到。 只要背景图片有合适的尺寸,我很乐意失去移动设备上的视差功能 帮忙? 附加基本代码 HTML: 编辑/更新 我尝试过使用不同的媒体查询,通过将div背景图像更改为较小的图像,至少可以在div背景图像上获得正确的比例,但这根本不起作用(它仍然使用较大的图像,放大): 我也尝试过
编辑/更新 我尝试过使用不同的媒体查询,通过将div背景图像更改为较小的图像,至少可以在div背景图像上获得正确的比例,但这根本不起作用(它仍然使用较大的图像,放大): 我也尝试过最小宽度和最大宽度。我通常使用此处提供的“封面检查表”: 但是如果你需要看到整个图像,这不是一个很好的用法 试试Keith Clark的解决方案:我用移动工具试过,效果很好。只需用图像替换背景。 HTML
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Background Layer</div>
</div>
</div>
<div id="group3" class="parallax__group">
<div class="parallax__layer parallax__layer--fore">
<div class="title">Foreground Layer</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group4" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Background Layer</div>
</div>
<div class="parallax__layer parallax__layer--deep">
<div class="title">Deep Background Layer</div>
</div>
</div>
<div id="group5" class="parallax__group">
<div class="parallax__layer parallax__layer--fore">
<div class="title">Foreground Layer</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group6" class="parallax__group">
<div class="parallax__layer parallax__layer--back">
<div class="title">Background Layer</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group7" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
基层
基层
背景层
前台程序层
基层
基层
背景层
深背景层
前台程序层
基层
背景层
基层
基层
您的代码没有视差。视差通常涉及JavaScript来处理背景的偏移移动。@j08691实际上不,视差完全可以通过3D CSS使用浏览器设备的内置GPU来完成,因为手机通常没有GPU。这意味着手机上的视差查看效果最好。至少是视差,对吧?这种功能。但是,如果移动设备能够以一种简单的方式实现这一点,我可以让两个div在一起。它在桌面上看起来不错。出于某种原因,我希望只通过css来实现它,但也许我应该从这个js解决方案开始。Keith Clark制作了一些很棒的东西。@soulitude-Keith-Clarks解决方案只是CSS,没有Javascript,但你应该知道,要让它正常工作,一个设备应该有一个GPU。这是一个很好的解决方案,但我真的无法让照片正确缩小。只要照片是全宽的,我就可以在移动设备上使用一个更静态的版本——失去视差。
body, html {
height: 100%;
margin: 0;
padding: 0;
font-size: 0;
background-color: red;
}
.divwrapper {
display: table;
width: 80%;
margin:auto;
font-size: 12px;
line-height: 150%;
text-align: center;
}
.div {
height:300px;
}
.bg01 {
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/52/cc/af/52ccaf818ddc056e12e522b9395dd87d.jpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.bg02 {
background-image: url("http://blog.hostbaby.com/backgrounds/bg_lightwoodfloor.jpg");
height: 100%;
width: 100%;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
@media (max-width: 600px) {
.bg01 {
background-image: url("../images/bg_small.jpg");
background-size: 20% 20%;
background-repeat: repeat;
}
}
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Background Layer</div>
</div>
</div>
<div id="group3" class="parallax__group">
<div class="parallax__layer parallax__layer--fore">
<div class="title">Foreground Layer</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group4" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Background Layer</div>
</div>
<div class="parallax__layer parallax__layer--deep">
<div class="title">Deep Background Layer</div>
</div>
</div>
<div id="group5" class="parallax__group">
<div class="parallax__layer parallax__layer--fore">
<div class="title">Foreground Layer</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group6" class="parallax__group">
<div class="parallax__layer parallax__layer--back">
<div class="title">Background Layer</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group7" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>