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

 我来答
cufe姐啦
2018-07-31 · TA获得超过6327个赞
知道小有建树答主
回答量:55
采纳率:0%
帮助的人:1.6万
展开全部

下面是图片不失真但不保证是否完全铺满(留有空隙或者超出屏幕)的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的浏览器才有效。

电脑(Computer)是一种利用电子学原理根据一系列指令来对数据进行处理的机器。电脑可以分为两部分:软件系统和硬件系统。第一台电脑是1946年2月15日在美国宾夕法尼亚大学诞生的ENIAC通用电子计算机

人们把没有安装任何软件的计算机称为裸机。随着科技的发展,现在新出现一些新型计算机有:生物计算机、光子计算机、量子计算机等。 

爽朗的嗯0
推荐于2017-06-20 · TA获得超过1469个赞
知道小有建树答主
回答量:1091
采纳率:81%
帮助的人:84.1万
展开全部
单张图片“铺满屏幕”与“不失真”之间是矛盾的,铺满屏幕就必然会使图片的长宽比例发生变化造成失真,除非图片的长宽比例刚好与屏幕的长宽比例完全一致。
下面是铺满屏幕但不保证是否失真的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的浏览器才有效。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
zcp299
推荐于2017-06-23 · TA获得超过1299个赞
知道小有建树答主
回答量:1182
采纳率:75%
帮助的人:410万
展开全部
不失真代表屏幕大小不能超过图片的原大小,这不可能;顶多实现宽高比不改变
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2015-10-15
展开全部
用svg格式的图片就可以
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
冰之殇Alen
2018-06-11
知道答主
回答量:7
采纳率:0%
帮助的人:5512
展开全部
image-rendering: -webkit-optimize-contrast;
百度上的答案大多数都是废话,老子看到就一把火
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 5条折叠回答
收起 更多回答(7)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式