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

html-css013

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

下面是图片不失真但不保证是否完全铺满(留有空隙或者超出屏幕)的css代码:

1、横向铺满,纵向留有空隙或超出屏幕:

body {background:url(图片路径) no-repeat centerbackground-size:100% auto}

2、纵向铺满,横向留有空隙或超出屏幕:

body {background:url(图片路径) no-repeat centerbackground-size:auto 100%}

补充说明:background-size属于css3,只有支持css3的浏览器才有效。

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

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

1)背景图片插入:background-image:url(位置及名称) //默认在父级元素内的左上角2)背景平铺方式:background-repeat:no-repeat //不平铺 3)背景位置:background-position:right bottom //横向在右边,纵向在下边,即右下角center center //位于中心center right //中间靠右100px 200px //靠左100 靠上2004)背景尺寸:background-size:cover/contain/100% 100% 等比例缩放(铺满即可)/包含在里面/按盒子大小缩放注意:低版本的IE不支持背景尺寸5)背景显示方式:background-attachment:scroll//随屏幕滚动 fixed//固定在可视区域,注意:此时的位置是相对于可视区域的  (fixed:这里有一个兼容性性的问题,在IE6中,只有html和body支持这个属性)6)在图片设置边距时注意IE6的双倍间距问题:同时有浮动和边距时产生双倍间距!解决方法: display:inline//变为行内元素即可