摘要：这里的关键说明在于标红的两个区域，分别是它会保持图片的宽高比和当图像和容器具有不同的尺寸时，空区域左右上右填充背景色。原图为，所以为了放入，宽，那么高就得宽高比，所以会有下面的空白。
background-size与背景图片填满div
在开发中，常有需要将一张图片作为一个div的背景图片充满div的需求
background-size的取值及解释background-size共有三种属性，分别为
background-size: coverMDN文档解释说明：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn"t get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
这里的关键说明在于标红的两个区域，分别是它会保持图片的宽高比和当图像和容器具有不同的尺寸时，图像被左/右或顶部/底部裁剪。之后会结合例子说明
background-size: containMDN文档解释说明：缩放背景图片以完全装入背景区，可能背景区部分空白。A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn"t get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.
这里的关键说明在于标红的两个区域，分别是它会保持图片的宽高比和当图像和容器具有不同的尺寸时，空区域（左/右/上/右）填充背景色。之后会结合例子说明
background-size: width-value,height-value;分为固定大小和百分比和auto，固定大小就是写死；auto就是以背景图片的比例缩放背景图片。。
百分比的的MDN文档解释说明实验及声明值，指定背景图片相对背景区（background positioning area）的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果attachment 为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。
这次选用鲁殿作为背景图，这张图的尺寸是260*234，宽高比为260/234 ≈ 1.11
假设一div的宽高为200*200，下面测试中左为表现图，右为原图
background-size: contain
background-size: cover
background-size: auto (auto)
background-size: 100% 100%
分析及解释：首先contain是不行的，原理在于contain要保持宽高比将图片完全放入div中，div为200×200。原图为260×234，所以为了放入div，宽260→200，那么高就得200/宽高比(1.11) = 180，所以会有下面的空白。
再其次，cover在这个时候也是不符合要求的，虽然看起来貌似符合要求，但是与原图是有差别的吗，原因在于cover与contain完全放入相反，它要求完全覆盖。所以要覆盖就要从更小的高计算。高234→200，宽就等于200×1.11 = 222，图像就会被右部裁剪掉一部分。
再再其次，auto是原图大小也是不符合的。
所以，background-size: 100%, 100%;是符合需求的。按照div的大小进行计算
其他各种大小div与各种大小的图片搭配请参照上述说明自行分析。
个人建议这种需求都使用background-size: 100%, 100%;
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112887.html
摘要：灵活的背景定位灵活的背景定位实现效果将背景图定位到距离容器底边且距离右边的位置。棋盘实现效果实现代码关键样式其它样式伪随机背景伪随机背景实现效果重复平铺的几何图案很美观，但看起来可能有一些呆板。灵活的背景定位 实现效果： 将背景图定位到距离容器底边 10px 且距离右边 20px 的位置。 background-position 方案 实现代码： 海盗密码 div { /* 关键样...
摘要：属性值则依赖于我们需要创建什么样的渐变背景，例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀，但为了简便起见，放射性渐变中我们不会再提及。线性渐变多年来，设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。 在CSS中，元素的背景可以是一个纯色，一张图，一个渐变...
摘要：属性值则依赖于我们需要创建什么样的渐变背景，例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀，但为了简便起见，放射性渐变中我们不会再提及。线性渐变多年来，设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。 在CSS中，元素的背景可以是一个纯色，一张图，一个渐变...
摘要：属性值则依赖于我们需要创建什么样的渐变背景，例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀，但为了简便起见，放射性渐变中我们不会再提及。线性渐变多年来，设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。 在CSS中，元素的背景可以是一个纯色，一张图，一个渐变...
摘要：做成背景图片单个你要的正方形你要的正方形居中填满多个循环时做成背景图片 单个 .imgdiv { width: 100px; // 你要的正方形 height: 100px; // 你要的正方形 background-image: url(/your/image/path.jpg); background-position: center cen...
阅读 3779·2021-10-12 10:11
阅读 3617·2021-09-13 10:27
阅读 2524·2019-08-30 15:53
阅读 1953·2019-08-29 18:33
阅读 2178·2019-08-29 14:03
阅读 972·2019-08-29 13:27
阅读 3290·2019-08-28 18:07
阅读 743·2019-08-26 13:23
