87,997
社区成员
发帖
与我相关
我的任务
分享请假大家一个困扰很久的问题，可能比较常见
请问大家一般是怎么处理，整个页面都需要一张铺满的背景图，而不使图片失真，background-size: cover; background-size:100% 100%; 不是上面类似的处理方法，上面的是可以铺满，但是图片也失真了，
...全文
请发表友善的回复…
发表回复
千梦一生 2020-10-16
- 打赏
- 举报
或者你找张矢量图（这个就放大不失真）。不过矢量图貌似一般比较简单。应该不符合需求。
你这个问题相当于怎么去除马赛克。可以自己搞点ai算法。万一真能搞出东西，搞ok了就是人生巅峰，迎娶白富美。以后看电影就靠你的算法了
你这个问题相当于怎么去除马赛克。可以自己搞点ai算法。万一真能搞出东西，搞ok了就是人生巅峰，迎娶白富美。以后看电影就靠你的算法了
医手 2020-10-16
- 打赏
- 举报
找个实际用这种网站的参考一下就知道了。
最笨的办法是要弄一张分辨率超高的图片。例如淘宝的登录页。
https://login.taobao.com/member/login.jhtml
通常而言优秀的美工设计师已经考虑到这种情况了，于是某个方向上是渐变至纯色的，于是超大屏幕超出图片的部分显示的是背景色，而背景色刚好就是图片渐变的最终颜色，于是那背景看上去就是图片的一部分。例如京东的登录页。
https://passport.jd.com/new/login.aspx?ReturnUrl=https%3A%2F%2Fwww.jd.com%2F
qybao 2020-10-16
- 打赏
- 举报
是不是只能探测屏幕分辨率，换不同的背景图[/quote]如果有多张不同分辨率的背景图，可以这么做
qingwadaxia_1 2020-10-16
- 打赏
- 举报
不能吧，美工给的设计图， 我其实这方面经验挺多的，第一次遇到这种情况。。。
ivens0011 2020-10-16
- 打赏
- 举报
能把背景变成svg的吗，反正我没试过
qingwadaxia_1 2020-10-16
- 打赏
- 举报
我明白你的意思，问题现在图片 左右两边都有内容，都是那种不能被拉伸的内容，
qingwadaxia_1 2020-10-16
- 打赏
- 举报
他们这种还是好的，起码固定了高度，我们这边需要做的是宽高都百分百适应，整个网页的
qingwadaxia_1 2020-10-16
- 打赏
- 举报
图片可以任意大小阿，多少尺寸合适呢？
gqkmiss 2020-10-16
- 打赏
- 举报
图片放在你想放的位置，例如居中，右对齐啥的，图片多大，就放多大，图片不设置宽高，其他靠背景色。
我们一般运营活动页面就是这么来的，web端固定最小宽度，图片设计就可以按照最小宽度设计，其他靠背景色
somfy 2020-10-16
- 打赏
- 举报
整张大图就好了
早点睡觉不要脱发 2020-10-15
- 打赏
- 举报
图片不够大,你又不给拉伸,还得铺满,你光要牛儿跑又不给牛吃草,有点过分啊
qingwadaxia_1 2020-10-15
- 打赏
- 举报
是不是只能探测屏幕分辨率，换不同的背景图
qingwadaxia_1 2020-10-15
- 打赏
- 举报
是一张有内容的图片，不能被拉伸的，这张需要背景图当整个网页的情况，没什么比较好的解决方法吗？
qybao 2020-10-15
- 打赏
- 举报
什么样算不失真？那也要看客户端屏幕的分辨率而定吧。
图片大小达不到屏幕分辨率就不说了，肯定会失真（图片被自动放大，像素不够）
反过来，比如你用手机打开页面（假设图片是1980*1200），那图片肯定被缩小了，里面的字有可能看不清了，那算不算失真？
图片大小达不到屏幕分辨率就不说了，肯定会失真（图片被自动放大，像素不够）
反过来，比如你用手机打开页面（假设图片是1980*1200），那图片肯定被缩小了，里面的字有可能看不清了，那算不算失真？
Logerlink 2020-10-15
- 打赏
- 举报
1.图片太小的话，只能换张大图了
将一张 100 x 100 px 的图片铺满整个屏幕肯定会失真的。
2.如果不介意重复，可以用 background-repeat: repeat;
