13、CSS 样式与动画属性全解析

CSS 样式与动画属性全解析

1. 元素背景相关属性

1.1 背景定位与重复

背景定位和重复属性可用于精确控制背景图像的显示方式。例如，使用 background-repeat: no-repeat; 可防止背景图像重复， background-position: center center; 能将背景图像水平和垂直居中。

background-repeat: no-repeat;
background-position: center center;

也可以使用绝对定位，如 background-position: 100px 100px; ，将图像从容器顶部和左侧偏移 100 像素。

1.2 背景原点（background-origin）

背景原点属性用于确定背景定位坐标的起始位置，默认值是 padding-box 。这意味着当 background-position 为 0% 0% 、 0px 0px 或 left top 时，背景图像将与内边距的顶部和左侧对齐。

1.3 背景裁剪（background-clip）

背景裁剪属性允许控制元素背景的显示区域，它接受与 background-origin 相同的值：