请假大家一个困扰很久的问题,可能比较常见

qingwadaxia_1 2020-10-15 05:01:51
请问大家一般是怎么处理,整个页面都需要一张铺满的背景图,而不使图片失真,background-size: cover; background-size:100% 100%; 不是上面类似的处理方法,上面的是可以铺满,但是图片也失真了,
...全文
2507 15 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
千梦一生 2020-10-16
  • 打赏
  • 举报
回复
或者你找张矢量图(这个就放大不失真)。不过矢量图貌似一般比较简单。应该不符合需求。

你这个问题相当于怎么去除马赛克。可以自己搞点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
  • 打赏
  • 举报
回复
引用 4 楼 qingwadaxia_1 的回复:
[quote=引用 2 楼 qybao 的回复:]什么样算不失真?那也要看客户端屏幕的分辨率而定吧。 图片大小达不到屏幕分辨率就不说了,肯定会失真(图片被自动放大,像素不够) 反过来,比如你用手机打开页面(假设图片是1980*1200),那图片肯定被缩小了,里面的字有可能看不清了,那算不算失真?
是不是只能探测屏幕分辨率,换不同的背景图[/quote]如果有多张不同分辨率的背景图,可以这么做
qingwadaxia_1 2020-10-16
  • 打赏
  • 举报
回复
引用 14 楼 ivens0011 的回复:
能把背景变成svg的吗,反正我没试过
不能吧,美工给的设计图, 我其实这方面经验挺多的,第一次遇到这种情况。。。
ivens0011 2020-10-16
  • 打赏
  • 举报
回复
能把背景变成svg的吗,反正我没试过
qingwadaxia_1 2020-10-16
  • 打赏
  • 举报
回复
我明白你的意思,问题现在图片 左右两边都有内容,都是那种不能被拉伸的内容,
qingwadaxia_1 2020-10-16
  • 打赏
  • 举报
回复
引用 7 楼 医手 的回复:
找个实际用这种网站的参考一下就知道了。 最笨的办法是要弄一张分辨率超高的图片。例如淘宝的登录页。 https://login.taobao.com/member/login.jhtml 通常而言优秀的美工设计师已经考虑到这种情况了,于是某个方向上是渐变至纯色的,于是超大屏幕超出图片的部分显示的是背景色,而背景色刚好就是图片渐变的最终颜色,于是那背景看上去就是图片的一部分。例如京东的登录页。 https://passport.jd.com/new/login.aspx?ReturnUrl=https%3A%2F%2Fwww.jd.com%2F
他们这种还是好的,起码固定了高度,我们这边需要做的是宽高都百分百适应,整个网页的
qingwadaxia_1 2020-10-16
  • 打赏
  • 举报
回复
引用 5 楼 早点睡觉不要脱发 的回复:
图片不够大,你又不给拉伸,还得铺满,你光要牛儿跑又不给牛吃草,有点过分啊
图片可以任意大小阿,多少尺寸合适呢?
gqkmiss 2020-10-16
  • 打赏
  • 举报
回复
图片放在你想放的位置,例如居中,右对齐啥的,图片多大,就放多大,图片不设置宽高,其他靠背景色。 我们一般运营活动页面就是这么来的,web端固定最小宽度,图片设计就可以按照最小宽度设计,其他靠背景色
somfy 2020-10-16
  • 打赏
  • 举报
回复
整张大图就好了
  • 打赏
  • 举报
回复
图片不够大,你又不给拉伸,还得铺满,你光要牛儿跑又不给牛吃草,有点过分啊
qingwadaxia_1 2020-10-15
  • 打赏
  • 举报
回复
引用 2 楼 qybao 的回复:
什么样算不失真?那也要看客户端屏幕的分辨率而定吧。 图片大小达不到屏幕分辨率就不说了,肯定会失真(图片被自动放大,像素不够) 反过来,比如你用手机打开页面(假设图片是1980*1200),那图片肯定被缩小了,里面的字有可能看不清了,那算不算失真?
是不是只能探测屏幕分辨率,换不同的背景图
qingwadaxia_1 2020-10-15
  • 打赏
  • 举报
回复
引用 1 楼 Logerlink 的回复:
1.图片太小的话,只能换张大图了 将一张 100 x 100 px 的图片铺满整个屏幕肯定会失真的。 2.如果不介意重复,可以用 background-repeat: repeat;
是一张有内容的图片,不能被拉伸的,这张需要背景图当整个网页的情况,没什么比较好的解决方法吗?
qybao 2020-10-15
  • 打赏
  • 举报
回复
什么样算不失真?那也要看客户端屏幕的分辨率而定吧。
图片大小达不到屏幕分辨率就不说了,肯定会失真(图片被自动放大,像素不够)
反过来,比如你用手机打开页面(假设图片是1980*1200),那图片肯定被缩小了,里面的字有可能看不清了,那算不算失真?

Logerlink 2020-10-15
  • 打赏
  • 举报
回复
1.图片太小的话,只能换张大图了 将一张 100 x 100 px 的图片铺满整个屏幕肯定会失真的。 2.如果不介意重复,可以用 background-repeat: repeat;

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧