CSS背景定位属性background-position怎么设置

css
956
2023/9/26 23:24:39
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

CSS背景定位属性background-position可以用来设置背景图像的位置。

可以使用以下值来设置background-position属性:

  • 关键字:left、center、right、top、bottom,分别表示背景图像在容器内的左、中、右、上、下位置。

  • 百分比值:使用百分比值来设置背景图像的位置,例如50% 50%表示背景图像在容器的中心位置。

  • 像素值:使用像素值来设置背景图像的位置,例如10px 20px表示背景图像左上角距离容器左上角的水平和垂直距离。

  • 组合值:可以将关键字、百分比值、像素值进行组合,例如left top表示背景图像在容器的左上角位置。

以下是一些示例:

background-position: left top;  // 背景图像在容器的左上角位置
background-position: center;  // 背景图像在容器的中心位置
background-position: 50% 50%;  // 背景图像在容器的中心位置
background-position: 10px 20px;  // 背景图像左上角距离容器左上角的水平和垂直距离分别为10px20px
background-position: right bottom;  // 背景图像在容器的右下角位置

注意:如果只指定一个值,则另一个值会被设置为默认值center。

辰迅云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读: css如何设置p标签字体大小