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

[justrand]

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

.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;
}

[codder]

这种背景挺烦的，你就直接拉伸好了，background-size: 100% 100%; 好了，其他啥都不用管

[xiangyuecn]

设计的脑子有包，固定尺寸又要适配所有设备

图片拆成 3 部分，顶部、底部 + 中间一段高度可以无限伸缩

[luo123qiu]

1 、把图片切成上中下 3 份，中间的设置为平铺
2 、用 css 写背景和边框，上下 2 部分的高光另外切图

[justrand]

@codder
确实烦。这背景图我去掉里面的一些图画元素了，如果用 background-size: 100% 100%; ，在部分设备看上去里面元素明显拉伸了

[SpiritQAQ]

就这张图来说，100vh + 100vw + background-size: cover 就够了吧

[Foxkeh]

直接矢量图?

[codder]

@justrand 找设计沟通吧，这个要是真的搞起来很麻烦的，我想到的就是你将图中独立的元素抽出成图，然后建一个 div 将小图图放进去用定位写模拟成背景的样式，不然无论怎么写都是会拉伸或者裁减的。

[marcong95]

border-image-slice? 不过你这高光似乎确实比较麻烦？

[polo3584]

做成九宫格的图？

[IvanLi127]

把视口尺寸上报给后端 让后端给你生。团队就要同进退，共患难

[cyrbuzz]

不写背景，写 img?

[icelake]

过去网速比较慢的年代，为了提高网页加载速度，背景图片都是很细的一条然后 CSS 里拉伸或者重复排列的，但前提是图片的纹理要能适应拉伸不变形或者有规律的排列，LZ 这个图片的纹理应该没法切条拉伸

[Leonard]

拉伸

[violetlai]

要么裁切 要么拉伸
就这张图来说 边框可以用 css 写 几个元素切 png 定位

[initd]

html <picture>元素 可以添加多个<source srcset=“1
png” media=“(min-with: 600px)”>，

[mozhizhu]

.9 切图

[ccyu220]

现在的前端已经忘了切图？忘了 9 宫图？

[dfkjgklfdjg]

单纯的这种不麻烦的背景，可以这样写：
用 [ 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]

@dfkjgklfdjg 厉害
虽然我上面的图片给出的不是很简单的背景，其实里面还有复杂的元素图片的，如果单纯的这种确实你的方案很厉害。

[dfkjgklfdjg]

@justrand #19，你可以尝试把外边框和高亮单独让 UI 给你切出来和背景分离，然后你在背景容器上用伪类做一个遮罩就好了。
就是边框容易变形，如果比例不一致的话，所以最好是切上下边一层，左右边一层。