css怎么让一张图片适应任何屏幕大小的电脑平铺?

 我来答
良一思维
2017-09-15 · 电子产品发烧友,坚持输出干货~
良一思维
采纳数:2939 获赞数:8206

向TA提问 私信TA
展开全部
1、横向铺满,纵向留有空隙或超出屏幕:
body {background:url(图片路径) no-repeat center; background-size:100% auto;}
2、纵向铺满,横向留有空隙或超出屏幕:
body {background:url(图片路径) no-repeat center; background-size:auto 100%;}

补充说明:background-size属于css3,只有支持css3的浏览器才有效。
lucjydesigner
2015-10-14 · TA获得超过104个赞
知道答主
回答量:51
采纳率:0%
帮助的人:23.6万
展开全部
background-size:100% 100%;
css3.0属性,低版本IE9以下不支持
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
帐号已注销
2012-12-26 · TA获得超过1466个赞
知道答主
回答量:154
采纳率:0%
帮助的人:72.9万
展开全部
如果是纯色的背景可以按照楼上的方法,如果是有图案的背景不建议这么做,会造成图片变形
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
Mexico卡卡
2017-09-16 · TA获得超过1万个赞
知道大有可为答主
回答量:1.3万
采纳率:98%
帮助的人:2039万
展开全部
单张图片“铺满屏幕”与“不失真”之间是矛盾的,铺满屏幕就必然会使图片的长宽比例发生变化造成失真,除非图片的长宽比例刚好与屏幕的长宽比例完全一致。
下面是铺满屏幕但不保证是否失真的css代码:
body {background:url(图片路径) no-repeat; background-size:100% 100%;}
下面是图片不失真但不保证是否完全铺满(留有空隙或者超出屏幕)的css代码:
1、横向铺满,纵向留有空隙或超出屏幕:
body {background:url(图片路径) no-repeat center; background-size:100% auto;}
2、纵向铺满,横向留有空隙或超出屏幕:
body {background:url(图片路径) no-repeat center; background-size:auto 100%;}
补充说明:background-size属于css3,只有支持css3的浏览器才有效。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
CCMaiCWW
2012-12-26 · TA获得超过1974个赞
知道大有可为答主
回答量:2128
采纳率:0%
帮助的人:1728万
展开全部
得看你的图片是否规则:
1、规则:只保留图片规则的那部分,然后使用背景重复即可,背景设置为body的背景,那么不管什么样的分辨率下,你的网页背景都是铺满整个屏幕的。
2、不规则:这个就只能把图片做的足够大,并且控制背景居中显示了。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 7条折叠回答
收起 更多回答(8)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式