V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
justrand
V2EX  ›  问与答

问个初级问题哦,一张 375px*667px 背景图做 backgroud 背景如何在各个设备都适配呢?

  •  
  •   justrand · 314 天前 · 1171 次点击
    这是一个创建于 314 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我如下 css 只能对,iphone6,7,8 这种宽长比可以完全覆盖,对 ipx 等就不行了,应该是图片尺寸问题。像这种是如何去解决的,制作多张图片通过 css media 去逐个匹配吗? 目前效果如下: iphone6,7,8 3333.png iphonex 微信截图_20210708111630.png

    .bg{
        background-image: url( https://i.loli.net/2021/07/08/5eUPNIg9xuKQBDb.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed; 
        background-size: cover;
    }
    第 1 条附言  ·  314 天前
    嗯,我做的这块客户要求不高,基本上我拉伸一下也可以用,客户也不会说啥。其实就是想问问大家有无通用的解决办法。
    21 条回复    2021-07-09 15:10:24 +08:00
    codder
        1
    codder  
       314 天前
    这种背景挺烦的,你就直接拉伸好了,background-size: 100% 100%; 好了,其他啥都不用管
    xiangyuecn
        2
    xiangyuecn  
       314 天前
    设计的脑子有包,固定尺寸又要适配所有设备

    图片拆成 3 部分,顶部、底部 + 中间一段高度可以无限伸缩
    luo123qiu
        3
    luo123qiu  
       314 天前
    1 、把图片切成上中下 3 份,中间的设置为平铺
    2 、用 css 写背景和边框,上下 2 部分的高光另外切图
    justrand
        4
    justrand  
    OP
       314 天前
    @codder
    确实烦。这背景图我去掉里面的一些图画元素了,如果用 background-size: 100% 100%; ,在部分设备看上去里面元素明显拉伸了
    SpiritQAQ
        5
    SpiritQAQ  
       314 天前
    就这张图来说,100vh + 100vw + background-size: cover 就够了吧
    Foxkeh
        6
    Foxkeh  
       314 天前
    直接矢量图?
    codder
        7
    codder  
       314 天前
    @justrand 找设计沟通吧,这个要是真的搞起来很麻烦的,我想到的就是你将图中独立的元素抽出成图,然后建一个 div 将小图图放进去用定位写模拟成背景的样式,不然无论怎么写都是会拉伸或者裁减的。
    marcong95
        8
    marcong95  
       314 天前
    border-image-slice? 不过你这高光似乎确实比较麻烦?
    polo3584
        9
    polo3584  
       314 天前
    做成九宫格的图?
    IvanLi127
        10
    IvanLi127  
       314 天前 via Android   ❤️ 3
    把视口尺寸上报给后端 让后端给你生。团队就要同进退,共患难
    cyrbuzz
        11
    cyrbuzz  
       314 天前
    不写背景,写 img?
    icelake
        12
    icelake  
       314 天前
    过去网速比较慢的年代,为了提高网页加载速度,背景图片都是很细的一条然后 CSS 里拉伸或者重复排列的,但前提是图片的纹理要能适应拉伸不变形或者有规律的排列,LZ 这个图片的纹理应该没法切条拉伸
    Leonard
        13
    Leonard  
       314 天前
    拉伸
    violetlai
        14
    violetlai  
       314 天前
    要么裁切 要么拉伸
    就这张图来说 边框可以用 css 写 几个元素切 png 定位
    initd
        15
    initd  
       314 天前
    html <picture>元素 可以添加多个<source srcset=“1
    png” media=“(min-with: 600px)”>,
    mozhizhu
        16
    mozhizhu  
       314 天前
    .9 切图
    ccyu220
        17
    ccyu220  
       314 天前
    现在的前端已经忘了切图?忘了 9 宫图?
    dfkjgklfdjg
        18
    dfkjgklfdjg  
       314 天前   ❤️ 6
    单纯的这种不麻烦的背景,可以这样写:
    用 [ background-image + linear-gradient() ] 作背景色,然后使用[ border-image + linear-gradient() ] 来处理边框,最后用伪类模拟一个高亮。

    附一个 demo
    https://codepen.io/yogwang/pen/PomzYXx

    https://z3.ax1x.com/2021/07/08/RLO076.jpg
    justrand
        19
    justrand  
    OP
       314 天前
    @dfkjgklfdjg 厉害
    虽然我上面的图片给出的不是很简单的背景,其实里面还有复杂的元素图片的,如果单纯的这种确实你的方案很厉害。
    dfkjgklfdjg
        20
    dfkjgklfdjg  
       314 天前
    @justrand #19,你可以尝试把外边框和高亮单独让 UI 给你切出来和背景分离,然后你在背景容器上用伪类做一个遮罩就好了。
    就是边框容易变形,如果比例不一致的话,所以最好是切上下边一层,左右边一层。
    angel001ma
        21
    angel001ma  
       313 天前
    上中下三段,中间部分 repeat
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1296 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 161ms · UTC 18:51 · PVG 02:51 · LAX 11:51 · JFK 14:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.