css背景属性全家桶 background背景图片好用技巧 img

 img { width: 200px; height: 400px; object-fit: cover; }

fill 默认

不保证保持原有的比例，内容拉伸填充整个内容容器。

contain

保持原有尺寸比例。内容被缩放。

cover

保持原有尺寸比例。但部分内容可能被剪切。

none

保留原有元素内容的长度和宽度，也就是说内容不会被重置。

scale-down

保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

initial

设置为默认值

全家桶原文:

一、图片的盒模型

二、background-origin与clip 背景图片定位参考系与背景裁剪

①、background-origin

②、background-clip

③、同时设置

④、比较

三、clip-path

四、 background-size

五、 background-position

六、background-attachment（背景图片是否固定）

七、text-shadow凹凸文字效果

八、background-clip:text;含有背景图片的文字、渐变色无缝滚动的文字

九、background-blend-mode

十、 backface-visibility

十一、background-image渐变

①线性渐变

②径向渐变background-image: radial-gradient(at left top, yellow, green);

③重复渐变

十二、background简写(单一