CSS中Body背景图片的自适应

html{height:100%;
}
body{background:url(../image/bg-m.jpg) no-repeat;background-size: cover;//或者background-size: 100% 100%;
}

background-size contain 与 cover 的区别

在no-repeat情况下，如果容器宽高比与图片宽高比不同

cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；
contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；

其实，从英文的意思来说：

cover意味着“遮罩、遮盖”---此处理解为“塞满”较恰当
contain意为“包含”--也就是：我图片虽然缩放了，但是整个图是被“包含”在你里面的，你必须把我显示完整、不能裁剪我一丝一毫。

在repeat情况下：

cover:与上述相同；
contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。

CSS中Body背景图片的自适应相关推荐

HTMLCSS——CSS中设定背景图片无法显示的解决办法
问题描述: 当前 .html 文件和 image 文件夹在同一目录下,均为当前项目根目录. 用如下代码在HTML中设定CSS样式,背景图片无法显示.  < ...
前端背景图放置_web前端入门到实战：css 中的背景图片小技巧和存在的坑
body 的背景图设置第一种 :这种情况下背景图片可以缩放但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
如何在div中设置背景图片并且自适应div大小
参考如下代码,设置背景图片的大小为100% 100%并且设置no-repeat 这样图片就能在div改变的情况下,仍然显示完全 <!DOCTYPE html> <html>&l ...
css中background-image背景图片路径设置
web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: / 项目根目录这个不用多说,就是程序 ...
JSP, CSS网页调整背景图片大小自适应
body{background-image:url(image/picture.jpg);/*从content区域开始显示背景*/ background-origin:content;/*图片上下左右 ...
table vue 背景图片_table中background背景图片自动拉伸
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
php图片背景平铺,css如何设置背景图片的平铺方式？css设置背景图片平铺的方法（图文详解）...
css如何设置背景图片的平铺方式?本文就给大家介绍css是如何设置背景图片平铺的方法,让大家了解在css中设置背景图片水平方法平铺.垂直方向平铺,或者是不平铺的方法.有一定的参考价值,有需要的朋友可以 ...
css怎么设置背景图片自适应大小
在css中,可以利用"background-size"属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加"background-size: ...
html语言设置网页背景,HTML+CSS入门设置网页中的背景图片的5个属性
本篇教程介绍了HTML+CSS入门设置网页中的背景图片的5个属性,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 在css代码中设置背景图片的方法,包括背景图片.背景重复 ...

CSS中Body背景图片的自适应

CSS中Body背景图片的自适应

CSS中Body背景图片的自适应相关推荐

最新文章

热门文章