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相同的值：