gpt4 book ai didi

html - 固定在移动设备上的背景

转载 作者:行者123 更新时间:2023-11-28 02:02:38 25 4
gpt4 key购买 nike

我想在固定背景上制作流动内容。它在桌面上完美运行。在 iOS 上也可以,但并不完美。主要问题出在安卓手机上。它不涵盖内容。如果你想编辑它,这里是 CodePen链接。

body{
height:200vh;
}
#one{
height:300px;
width:100%;
background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat fixed/cover;
}
#two{
padding-top:30px;
background-color:grey;
height:400px;
padding-left:10px;
}
.column{
width:calc((100% / 3) - 10px);
height:200px;
float:left;
margin-right:10px;
background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat fixed/cover;
}
<body>
<section id="one"></section>
<section id="two">
<div class="column column_one"></div>
<div class="column column_two"></div>
<div class="column column_three"></div>
</section>
</body>

最佳答案

您可以将固定背景图片放入单独的专用 div 中,而不是浏览器背景本身。将您的 div 设置为视口(viewport)高度和宽度的 100%,为其指定固定位置和 -10 的 z-index,然后将所有背景图像样式放在该 div 中,将浏览器背景留空。

不知道其他解决方法。 android 有问题...

关于html - 固定在移动设备上的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49224949/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com