CSS中的滤镜和尺寸冲突

CSS中的滤镜

CSS中的滤镜使用filter属性实现

none：默认值，没有效果

blur(px)：高斯模糊。设定高斯函数的标准差，或屏幕上以多少像素融在一起，值越大越模糊，默认0；

brightness(%)：线性乘法，使其看起来更亮或更暗

值是0%，图像会全黑
值是100%，则图像无变化
可以超过100%，意味着会运用更低的对比
默认100%

drop-shadow(h-shadow v-shadow blur color)：设置阴影

与已有的box-shadow属性很相似，但通过filter，一些浏览器为了更好的性能会提供硬件加速
offset-x：阴影水平偏移量，可为负数
offset-y：阴影垂直偏移量，可为负数
blur-radius：可选，设置阴影模糊，值越大越模糊，不允许负值，默认0
color：可选，设置阴影颜色，若未设定，会应用color属性的值(可能会有兼容性问题)

grayscale(%)：转换为灰度，值为100%则完全转为灰度图像，值为0%图像无变化，默认0

hue-rotate(deg)：色相旋转。值为0deg(默认值)无变化。该值虽然没有最大值，但超过360deg的值相当于又绕一圈

invert(%)：反转颜色。100%是完全反转，0%图像无变化。默认0

opacity(%)：透明度。为0%完全透明，为100%无变化。默认100%，与已有的opacity属性很相似，但通过filter，一些浏览器为了提升性能会提供硬件加速

saturate(%)：转换饱和度。为0%完全不饱和，为100%无变化，允许超过100%(有更高的饱和度)，默认100%

sepia(%)：将颜色转换为深褐色。值定义转换的比例。为100%表示完全是深褐色，为0%图像无变化。默认0%

CSS中的尺寸冲突

object-fit：对于指定了width和height的元素应该如何处理指定的尺寸和元素本身的尺寸冲突，主要用于img和video

fill：默认，按照指定的width和height显示，不考虑原有宽高
contain：保持原有宽高比。缩放至能完整放置于指定宽高的大小，元素不会被裁切
cover   保持原有宽高比。缩放至高度或宽度其中较小的一项能完整显示的大小，较大的一项可能会被裁切
none    保留原有长度和宽度

object-position left top：设置元素的放置位置

left：表示距离左侧的距离，可以使用px为单位的值，也可以使用left，right关键字，也可以使用百分数
top：表示距离顶部的距离，可以使用px为单位的值，也可以使用top、bottom关键字，也可以使用百分数
默认值object-position 50% 50%