学堂 学堂 学堂公众号手机端

background-position属性用于设置背景图片的起始位置。 语法

lewis 1年前 (2024-04-29) 阅读数 17 #技术

background-position属性用于设置背景图片的起始位置。

语法: background-position:xy;

属性值:


  • x:水平方向的起始位置。可以使用具体的像素值(如10px),也可以使用百分比值(如50%)。默认值为50%。
  • y:垂直方向的起始位置。可以使用具体的像素值(如10px),也可以使用百分比值(如50%)。默认值为50%。

如果只指定一个值,则该值将应用于水平和垂直方向的起始位置。

示例: background-position:00;//将背景图片的起始位置设置为左上角 background-position:center;//将背景图片的起始位置设置为居中 background-position:rightbottom;//将背景图片的起始位置设置为右下角 background-position:20%40%;//将背景图片的起始位置设置为水平方向上的20%,垂直方向上的40%

可以使用负值来设置背景图片相对于容器的偏移。

示例: background-position:-10px-20px;//将背景图片的起始位置向左上方偏移10像素和20像素

注意:如果背景图片的宽度或高度小于容器的宽度或高度,则背景图片将被拉伸以填满整个容器。在这种情况下,起始位置的设置可能不会产生预期的效果。

版权声明

本文仅代表作者观点,不代表博信信息网立场。

热门