[分享]CSS中 实现背景图像水平或垂直

CSS中可以通过backgroundimage属性来设置元素的背景图像。但是在特定场景下，我们需要让背景图像水平或垂直对齐。这可以通过background属性来实现。下面以水平对齐为例，设定元素的背景...

CSS中可以通过background-image属性来设置元素的背景图像。但是在特定场景下，我们需要让背景图像水平或垂直对齐。这可以通过background-position属性来实现。

下面以水平对齐为例，设定元素的背景图像：

 .background {
        background-image: url("background.jpg");
    } 

接着，使用background-position属性来设定背景图像的水平位置，其默认值为0% 50%，即左对齐，垂直居中：

 .background {
        background-image: url("background.jpg");
        background-position: 50% 50%; /* 水平居中 */
    } 

可以将第一个值设为百分比或具体长度值，表示水平偏移量；将第二个值设为百分比或具体长度值，表示垂直偏移量。

若要左对齐，则第一个值设为0%或具体长度值，第二个值不变；若要右对齐，则第一个值设为100%或具体长度值，第二个值不变。

同样，垂直对齐也是类似的，只需要将第一个值设为水平居中，第二个值设为0%或具体长度值（顶部对齐）或100%或具体长度值（底部对齐）。

 /* 垂直居中 */
    .background {
        background-image: url("background.jpg");
        background-position: 50% 50%;
    }
    
    /* 顶部对齐 */
    .background {
        background-image: url("background.jpg");
        background-position: 50% 0%;
    }
    
    /* 底部对齐 */
    .background {
        background-image: url("background.jpg");
        background-position: 50% 100%;
    } 

通过设定background-position属性，我们可以实现背景图像的水平或垂直对齐，让页面展示更加美观。