这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战
object-fit
object-fit属性只支持关键字属性值，接收的有fill、contain、cover、none、scale-down。fill是默认值，表示填充替换内容会拉伸，不保证原有的比例。contain表示包含替换内容保持原有尺寸比例，同时替换内容一定可以完整显示，至少有一个尺寸保持一致。cover表示覆盖替换内容同样会保持原始的尺寸比例，同时替换内容会完全覆盖区域。none表示替换内容的尺寸显示为原始尺寸，无视外部尺寸设置，如果图片尺寸较小，就会在四周产生大量留白，如果图片尺寸较大，则会有较大面积的图片区域被剪裁。scale-down选取呈现的尺寸较小的那个效果。
object-fit: fill;
object-fit: contain;
object-fit: none;
object-fit: cover;
object-fit: scale-down;
image-rendering
image-rendering属性用来设置图像的缩放算法，主要用于png和jpg这类图。不仅可以设置在img元素上，还可以设置在img的祖元素上面，还可以设置background图像和canvas画布图像的缩放算法。image-rendering属性只有在图像发生缩放的时候才会有效果。接收的参数有auto、crisp-edges、pixelated。auto表示浏览器自动选择使用何种图像缩放算法，通常表现为平滑缩放。crisp-edges表示不使用平滑缩放算法，所以缩放的图像会有较高的对比度和较锐利的边缘，也不会有模糊的感觉。pixelated表示当放大图像时，必须使用邻近算法，使图像看起来由大像素块组成；当缩小图像时，使用与auto关键字属性值相同的算法。
.warpper {
image-rendering: auto;
}
// 图像边缘锐化
.box {
image-rendering: crisp-edges;
}
// 图像像素化
.content {
image-rendering: pixelated;
}
cross-fade
cross-fade()函数可以让两张图像半透明混合。新语法可以指定任意数量的透明叠加图像，同时可以分别指定每张图像的透明度。也可以不指定透明度值，则未指定透明度值的图像的透明度值是用100%减去已经指定的透明度百分比值，然后除以未指定透明度值图像的数量得来的。可以用于实现降低背景图透明度的效果。
cross-fade(url(test.png) 64%, url(web.png) 88%);
element
element()函数可以让页面中任意DOM元素的渲染效果变成图像，使用方法就是element(#id)，这个id指的就是页面中DOM元素的id值。可以用于实现元素的倒影效果。
