gpt4 book ai didi

html - 在移动 safari、横向 * 和 * 纵向 (iPhone/iPad) 中将背景图像居中

转载 作者:太空宇宙 更新时间:2023-11-04 00:16:07 24 4
gpt4 key购买 nike

我有一张 1024 x 1024 像素的背景图片;这些尺寸的原因是我希望图像在横向纵向 模式下覆盖屏幕。该图像的中央有一个小 Logo ,但除此之外它是一个简单的渐变。我希望图像始终居中;换言之, Logo 必须始终位于屏幕中央,无论是横向 还是纵向 方向。我还希望图像覆盖整个屏幕,但不希望背景图像产生不必要的滚动条;所以我不希望通过在屏幕上拖动图像来移动图像。

这是我尝试过的方法(为了这个例子,我只是在 HTML 中使用了一个样式标签):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
<title>Test</title>
<style>
html,body {
width:100%;
height:100%;
}
body {
background-image: url('../img/background.jpg');
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
}
</style>
</head>
<body>
Hello world.
</body>
</html>

此处代码的问题是图像未居中(在纵向模式下 Logo 显示在屏幕右侧,在横向屏幕)。背景图像似乎也成为页面内容的一部分,因此会导致滚动条,这意味着可以左右拖动图像。

我更喜欢只有 CSS 和 html 的解决方案,但如果可行的话,我会接受带有 Javascript 的解决方案。请不要在这里提及与其他浏览器有关的问题,我在这个问题中专门询问有关 Mobile Safari 的问题。我已经尝试了很多各种答案中提出的建议,但我还没有找到在 Mobile Safari 中正常工作的解决方案。

所以这里再次以点的形式列出我的要求:

  • 背景图片总是覆盖整个屏幕(不显示空白)
  • 图像始终居中(因此溢出在左右/顶部和底部之间均匀分布)
  • 当 iPad 在横向和纵向之间旋转时图像保持居中
  • 背景图片是固定的(不能移动)
  • 最好是仅使用 HTML 和 CSS 的解决方案(CSS3 也可以)

有人知道如何做到这一点吗?

更新:

这个问题可能出在电脑和椅子之间! ;) 当我解决了 UIWebview 中的问题后,我会发布更新。

好的。已确认。这里没什么可看的! :) 这个问题完全是我自己造成的,我提供的 HTML 实际上工作正常。这是错误的,因为正在加载的 HTML 是一个错误屏幕,并且在试图“伪造”错误情况时我导致了一个实际错误,即 UIWebview 在它准备好之前就被加载了。当我在正确的时间加载 HTML 时,居中突然起作用并且滚动条消失了。一切都是 100%。

最佳答案

背景图像没有高度和宽度,它们的高度和宽度取决于应用它们的父级的高度和宽度。所以背景图片不可能产生滚动条。

如果您希望背景图像根据屏幕尺寸调整大小,请使用:

background-size: cover; 

关于html - 在移动 safari、横向 * 和 * 纵向 (iPhone/iPad) 中将背景图像居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11211197/

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