Home Sign Up Sign In
edison111cry
V2EX  ›  问与答

求教前端大佬 H5 页面的背景图片在 iPhoneX 下面空白一块

  •   
  •   edison111cry · Oct 12, 2019 · 3580 views
    This topic created in 2584 days ago, the information mentioned may be changed or developed.
    background-image: url('data/wechat/home_background.png');
    background-size: cover;
    background-repeat:no-repeat;


    加载的背景图片在其他手机上测试都是铺满屏幕，就是 iPhoneX 下面留白，有没有简单的方法来实现一下哈
  • iphonex
  • no-repeat
  • 求教
  • WeChat
    6 replies  •  2019-10-13 13:16:47 +08:00
    1KN6sAqR0a57no6s
    1KN6sAqR0a57no6s
    Oct 12, 2019 via Android
    1
    提供一下该元素 width 和 height 的定义
    edison111cry
    edison111cry
    OP
    Oct 12, 2019
    2
    @YuxiangLuo 就直接是 body 里的哈
    1KN6sAqR0a57no6s
    1KN6sAqR0a57no6s
    Oct 12, 2019 via Android
    3
    body 元素加一个 height: 100vh; 试试
    edison111cry
    edison111cry
    OP
    Oct 12, 2019
    4
    @YuxiangLuo 空白倒是给补上了哈，图片也没有变 形，但是这个图片右边和下边有一部分超出屏幕看不到了，也不行呢。
    szz
    szz
    Oct 13, 2019
    5
    试试 background-size: 100% 100%
    louieliu
    louieliu
    Oct 13, 2019
    6
    https://github.com/LiuL0703/blog/issues/31 可以看看这个
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   4492 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 02:58 · PVG 10:58 · LAX 18:58 · JFK 21:58
    ♥ Do have faith in what you're doing.