CSS如何将背景图居中显示的样式代码和技巧

CSS可以通过一些样式代码和技巧将背景图居中显示。

使用background-position属性

background-position属性用于设置背景图片的位置，其可以设置两个值，分别是水平方向（x轴）和垂直方向（y轴）的位置，可以设置绝对位置和相对位置。当设置两个值都为50%时，就可以将背景图片居中显示。

background-position: 50% 50%;

使用background属性

background属性是CSS中定义背景图片的一个简写属性，可以设置背景图片的位置，可以设置两个值，分别是水平和垂直方向的位置，可以设置绝对位置和相对位置。当设置两个值都为center时，就可以将背景图片居中显示。

background: url(images/bg.jpg) center center;

使用background-image属性

background-image属性用于设置背景图片，可以设置背景图片的位置，可以设置两个值，分别是水平和垂直方向的位置，可以设置绝对位置和相对位置。当设置两个值都为center时，就可以将背景图片居中显示。

background-image: url(images/bg.jpg);
background-position: center center;

使用background-size属性

background-size属性用于设置背景图片的尺寸，可以设置两个值，分别是宽度和高度，可以设置为绝对值和相对值，当设置两个值都为cover时，就可以将背景图片拉伸至元素的宽高，以居中显示背景图片。

background-size: cover;

使用background属性组合方式

background属性也可以组合使用，将background-image、background-position、background-size三个属性组合在一起使用，来实现背景图片的居中显示。

background: url(images/bg.jpg) center center / cover;

使用CSS3中的transform属性

CSS3中提供了transform属性，可以使用transform属性中的translateX和translateY来实现背景图片的居中显示，其中translateX表示水平方向的位置，translateY表示垂直方向的位置，当设置translateX和translateY的值都为50%时，就可以将背景图片居中显示。

transform: translateX(50%) translateY(50%);

千锋教育是高品质web前端培训机构，千锋教育拥有大量实力web前端培训讲师，提供优质的web培训课程，web前端培训，欢迎报名千锋教育。