[分享]css中background背景图片大小

在CSS中，设置background背景图片时有一个常用的属性叫作backgroundsize，这个属性的作用是控制背景图片的大小。个人认为该属性非常重要，因为合适的背景图片大小能够让你的网页更加精美...

在CSS中，设置background背景图片时有一个常用的属性叫作background-size，这个属性的作用是控制背景图片的大小。个人认为该属性非常重要，因为合适的背景图片大小能够让你的网页更加精美。
使用background-size属性可以设置背景图片的大小，我们可以使用具体的尺寸值如px、em和rem等。同时，我们还可以使用一些相对大小的属性值，例如cover和contain。
background-size: cover表示让背景图像覆盖整个容器，即使图片的比例有所变化，也能够填满容器。而background-size: contain则表示让整张背景图像适应容器尺寸，这样背景图像就会保持完整，但是也可能会留下一些空白。
如果你的网页需要显示一些特定的图片，比如公司标志或产品图片等，那么你还可以使用一些特殊的背景图片属性值。例如，如果你希望公司标志或产品图片始终在网页中可见，那么你可以使用background-attachment: fixed属性值。
下面这些示例代码展示了一些常见的background-size属性值以及如何在CSS中使用它们。通过这些示例代码，我们可以更好地了解和掌握background-size属性的用法：

 p {
      background-image: url('example.jpg');
      background-size: auto; /*默认值，背景图像的原始大小*/
    }
<br>
    p {
      background-image: url('example.jpg');
      background-size: contain; /*使背景图像适应容器尺寸，保持图像完整*/
    }
<br>
    p {
      background-image: url('example.jpg');
      background-size: cover; /*让背景图像填充容器，并保持比例不变*/
    }
<br>
    p {
      background-image: url('example.jpg');
      background-size: 100% 100%; /*使背景图像充满容器*/
    }
<br>
    p {
      background-image: url('example.jpg');
      background-size: cover;
      background-attachment: fixed; /*使背景图像固定在网页中，无论何时，都会显示出来*/
    } 

总之，合适的背景图片大小可以使你的网页更加美观。而background-size属性是控制背景图片大小的重要属性值。如今，我们已经对background-size属性及其用法有了更深的了解。