背景大小 CSS 属性在 Safari 上的 IOS 设备中无法正常工作

发布于 2025-01-16 17:11:37 字数 583 浏览 2 评论 0原文

我设置了身体背景尺寸。它在 android 和 windows 中运行良好。背景的大小就可以了。但是，当在 iPhone 上加载我的网站时，背景尺寸（特别是高度）看起来太大，无法达到 5%。背景大小：85% 5%；所以宽度是 body 的 85%，高度是 body 的 5%，但高度看起来是视口的 50%，这很奇怪。为什么这种情况只发生在 iPhone 上。我认为添加 webkit 前缀是行不通的。 ios和safari有什么问题吗...？我错过了什么吗...？如果您知道发生了什么事，请帮我解决这个问题。预先感谢...

CSS

body 
{
    background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white) fixed;
    background-repeat: no-repeat;
    background-position: top center; 
    background-size: 85% 5%; 
}

浏览器如何计算正文背景高度..？其他浏览器正在获取视口高度，但在 iPhone 中参数不匹配......

原文

I have a body background size set. It works well as intended in android and windows. The size of background is okay there. But when loading my site on iphone the background size specifically the height looks too big to be 5%. background-size: 85% 5%; So the width is 85% of the body and height is 5% of the body but the height looks 50% of the viewport which is weird. Why this is happening only on iphone. Adding webkit prefix won't work I think. Is there anything wrong with ios and safari ...? Am I missing anything ...? Help me to fix this if you know what's going on. Thanks in advance ...

CSS

body 
{
    background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white) fixed;
    background-repeat: no-repeat;
    background-position: top center; 
    background-size: 85% 5%; 
}

How browsers calculate the body background height ..? Other browsers are taking viewport height but in iphone the parameters are not matching up ...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回眸一遍 2025-01-23 17:11:37

您使用fixed的方式是background-attachment:fixed;的快捷方式。

此属性没有得到很好的支持。检查我可以使用了解当前的支持是什么。

高度设置为 100% 的固定位置元素的行为就像具有 background: ....fixed; 属性的元素。

因此，您应该以这种方式创建一个 div （请参阅带有 background 类的属性），而不是在 body 上拥有属性：

<head>

<style>

  .background {

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 100%;

    background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white);

    background-repeat: no-repeat;

    background-position: top center;

    background-size: 85% 5%;

  }

  .long-div {

    height: 100vh;

  }

</style>

</head>

<body>

  <div class="background"></div>

  <div class="long-div">Scroll down to see it how it behaves on scroll

The way you used fixed is a shortcut for background-attachment: fixed;.

This property isn't well supported. Check Can I Use to know what's the current support.

A fixed-position element with a height set to 100% behaves just like the element with background: .... fixed; property.

So, instead of having a property on body you should create a div this way (see the one with background class):

<head>
<style>
  .background {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white);
    background-repeat: no-repeat;
    background-position: top center; 
    background-size: 85% 5%; 
  }
  .long-div {
    height: 100vh;
  }
</style>
</head>
<body>
  <div class="background"></div>
  <div class="long-div">Scroll down to see it how it behaves on scroll ????????</div>
  <div class="long-div">Here you are at half of the scroll ????????</div>
  <div>Here you are at bottom of the scroll.</div>
</body>

You can find a well documented article on CSS-TRICKS The Fixed Background Attachment Hack.

回复收藏 0 原文

无声无音无过去 2025-01-23 17:11:37

对于 iPhone safari，我认为你必须在媒体查询中添加背景附件

@media (max-width : @iphone-screen){
background-attachment: scroll;

}

For iPhones safari, I think you have to add background-attachment in the media query

@media (max-width : @iphone-screen){
background-attachment: scroll;

}

回复收藏 0 原文

~没有更多了~

关于作者

半城柳色半声笛

暂无简介

文章

29 人气

关注发私信

友情链接

文江博客

背景大小 CSS 属性在 Safari 上的 IOS 设备中无法正常工作

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

背景大小 CSS 属性在 Safari 上的 IOS 设备中无法正常工作

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。