css居中background-size

CSS中的background-size属性用于设置背景图片的大小。通常情况下，我们可以使用cover或contain属性来控制图片大小以适应元素大小。但是当我们想要将图片完全居中时，该如何设置background-size呢？下面我们来介绍一下。

首先，我们可以使用background-position属性来调整背景图片的位置，将其垂直和水平都居中。具体代码如下：

div {
      background-image: url("example.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: auto;
}

上述代码中，我们通过将background-position设置为中心，使背景图片在x轴和y轴上都居中。但是，由于我们将background-size设置为"auto"，因此图片的大小将不会被控制。

接下来，我们可以通过使用background-size属性的特殊值"100% 100%"来将图片大小设置为容器大小，再使用background-position将其居中。具体代码如下：

div {
      background-image: url("example.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
}

上述代码中，我们将background-size设置为"100% 100%"，使图片大小与容器大小相同。然后通过background-position将其水平和垂直居中。

如果我们希望将图片保持原始比例并水平垂直居中，我们可以使用另一种方式。具体代码如下：

div {
      background-image: url("example.jpg");
      background-position: center center;
      background-repeat: no-repeat;
          background-size: contain;
}
div::before {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em;
 /* Adjusts for spacing */}
div img {
      vertical-align: middle;
      max-width: 100%;
}
    

上述代码中，我们将background-size设置为"contain"，使图片按比例缩放以适应容器大小。然后，我们使用一个实心元素（div::before）将其垂直居中并使用CSS flexbox技术来将其水平居中。

总结一下，通过使用CSS的background-position和background-size属性，我们可以将背景图片完美地居中。不妨根据实际情况尝试不同的方式来实现您想要的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！