个人中心
gpt4 book ai didi

html - 背景图片封面在移动版 Chrome 上的行为有所不同

转载 作者：行者123 更新时间：2023-11-28 00:13:20 27 4
gpt4 key购买 nike

我们正在尝试拥有一个固定的背景图像来覆盖我们内容的整个视口(viewport)(就像内容漂浮在其上的墙纸)。这是我一直用来完成此操作的代码:

<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
</head>
<body>

<div>
</div>

<style>
div {

height: 150vh; 

background: url(https://www.google.com/logos/doodles/2019/spring-equinox-2019-northern-hemisphere-5139135894388736.3-l.png) no-repeat center fixed;
background-size: cover;

}
</style>

</body>
</html>

您也可以在这里查看:http://neonorb.com/background-test.html

在桌面版 Chromium 和 Firefox 以及移动版 Firefox 上，这符合我的预期。也就是说，容器是 150vh，您可以这样滚动，而背景图像保持静止。

但是，如果您在移动版 Chrome 中查看它，图像会占据其容器的整个高度(即 150vh)并且实际上会滚动并且不会固定。

这是移动版 Chrome 中的错误吗？或者这种行为实际上是正确的并且错误实际上存在于桌面 Chromium 和两个 Firefoxes 中？还是我做错了什么？

编辑:

对 background-size:cover; 的行为进行一些研究......它说 cover仅涵盖 "background positioning area" .这本身就很好。

但是，当您同时申请 background-attachment:fixed; 时图像被视为 position:fixed; 而不是。

那么为什么看起来大多数浏览器都像这样覆盖整个视口(viewport)，但移动版 Chrome 却没有？

最佳答案

如果您打算将背景应用到 div，而不是 body 元素本身；确保您的 div 保持与视口(viewport)(或您希望背景覆盖的区域)相同的大小:

#div-with-background {
    display: block;
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    margin: 0;

    background: url(https://www.google.com/logos/doodles/2019/spring-equinox-2019-northern-hemisphere-5139135894388736.3-l.png) no-repeat center fixed;
    background-size: cover;
}

您还需要删除 html 和 body 标签上的边距:

html, body {
    margin: 0;
    padding: 0;
}

fiddle :https://jsfiddle.net/ne95d4za/

关于html - 背景图片封面在移动版 Chrome 上的行为有所不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55265771/

27 4 0
文章推荐： html - 响应式文本定位？
文章推荐： html - 创建具有相同大小图像的响应式 flexbox
文章推荐： html - float 侧边栏的内容转到主容器
文章推荐： c++ - 使虚拟方法的实现静态化。
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com