位置: IT常识 - 正文
background-size 之 背景图的尺寸设置
编辑：rootadmin目录
一：background-size参数取值
1.0
1.1
二：实例分析
2.1 参数分析
2.2 代码实例分析
推荐整理分享background-size 之 背景图的尺寸设置，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
引：background-size: 没有设置任何尺寸时使用图片本身的大小，宽度和高度都是auto默认值
可以用px设置成具体的值，也可以使用百分比
一：background-size参数取值1.01个值 同时设置宽高 2个值 分别设置宽高
1.11 以px为单位的数字 2 % 3 cover 让背景图片充满这个容器,哪怕图片显示不全也没关系,不在乎 4 contain 让图片完全在容器中显示(等比例缩小)哪怕容器有空白，也没关系
1.2 作用范围这些属性能够写在一个简单的属性中：background。必须指出background负责元素内容部分的背景，包括padding和border，但不包括margin。
二：实例分析各种不同比例的适配问题，完美适配很少发生
2.1 参数分析
background-size: 100% 50%; 宽度占满屏幕，高度占50%
background-size: 100% 100%; 宽度高度都占满整个屏幕，除非图片完美适配，否则图片会变形
background-size: 100% auto; 宽度占满屏幕，高度自动适配，高度有所牺牲
background-size: auto 100%; 高度占满屏幕，宽度自动适配，宽度有所牺牲
至于是要牺牲宽度还是高度，具体问题具体分析，比如学子的沙发可以裁掉，有的背景图不能裁
background-size: cover；铺满整个容器，多余的部分会被裁掉
background-size: contain；至少有一张完整的图呈现出来，一定会有多余的空间
2.2 代码实例分析背景图1和背景图2 you红色边框分隔开来
背景图1
背景图2
<!DOCTYPE html><html><head><meta charset="utf-8"><title>背景图片的尺寸</title><style type="text/css">* {margin: 0;padding: 0;}/* 版心尽量清爽一点，就设置宽度与居中 */.center {width: 900px;margin: 0 auto;}/* 背景图1的相关设置 */.pic {/* 宽度使用父级的 */height: 500px;border: 5px solid red;/* 加入背景图 */background-image: url(img/bg.png);/* 尺寸设置 */background-size: 600px 300px;/* 可以使用百分比，但是宽高都是100%的情况，防止图片变形 */background-size: 100% 100%;/* 宽度100%，高度自动适配，会牺牲一部分高度 */background-size: 100% auto;/* 宽度自动适配，高度100%，会牺牲一部分宽度 */background-size: auto 100%;/* 铺满整个屏幕，多余的部分会被裁掉 */background-size:cover; /* 至少有一张完整的图呈现出来，一定会有多余的空间 */background-size:contain;}.shucai {height: 300px;background-image: url(img/carousel-1.jpg);background-size: auto 100%;/* 与contain是有区别的，注意观察两种值不同的效果 */background-size: 100% auto;/* 至少有一张完整的图片展现出来 */background-size: contain;/* 铺满整个容器，多余的部分会被裁掉 *//* background-size: cover; */}</style></head><body><div class="bg1"><div class="center"><!-- pic这个要设置与背景图相关的样式 --><div class="pic"></div></div></div><div class="bg2"><div class="center"><!-- pic这个要设置与背景图相关的样式 --><div class="shucai"></div></div></div></body></html>上一篇：《Web应用开发》(头歌)(《web应用开发》是什么)
下一篇：浏览器同源策略导致跨域问题 No ‘Access-Control-Allow-Origin‘ header 原因及解决方式--（后端、nginx、前端）(浏览器同源策略限制)
