[分享]css中如何设置背景图片大小

在CSS中设置背景图片大小有很多方法，下面我们分别介绍一下。1、使用backgroundsize属性backgroundsize属性可以用来设置背景图片的尺寸大小。语法如下：backgroundsiz...

在CSS中设置背景图片大小有很多方法，下面我们分别介绍一下。
1、使用background-size属性
background-size属性可以用来设置背景图片的尺寸大小。语法如下：
background-size：宽度 高度;
其中，宽度和高度可以采用px、em、rem、百分比等单位进行设置。
例如，我们可以通过以下代码来设置背景图片的大小为500px * 300px：
pre{
background-image: url("背景图片地址");
background-size: 500px 300px;
}
2、使用background-repeat属性
background-repeat属性可以用来设置背景图片的重复方式。默认情况下，背景图片会平铺在整个元素中。如果背景图片的尺寸大于元素的大小时，可以使用background-repeat来裁剪背景图片。使用方式如下：
background-repeat:重复方式;
其中，重复方式参数可以采用以下值：
·repeat：背景图像将在垂直方向和水平方向重复。
·repeat-x：背景图像将在水平方向重复。
·repeat-y：背景图像将在垂直方向重复。
·no-repeat：背景图像将仅显示一次。
例如，我们可以通过以下代码来设置背景图片不重复：
pre{
background-image: url("背景图片地址");
background-repeat: no-repeat;
}
3、使用background-position属性
background-position属性可以用来设置背景图片相对于元素的位置。默认情况下，背景图片会在元素的左上角开始显示。我们可以使用background-position来调整背景图片的位置。使用方式如下：
background-position：水平位置 垂直位置;
其中，水平位置可以采用left、center、right等关键词，也可以采用具体的长度值进行设置。垂直位置同理。
例如，我们可以通过以下代码来设置背景图片的位置为右上角：
pre{
background-image: url("背景图片地址");
background-position: right top;
}
以上就是CSS中设置背景图片大小的几种方法，希望对大家有所帮助。