css 把图片全部铺满 |用css写水印的样式

CSS 是前端开发中非常重要的技术之一。特别是在设计网页时，CSS 可以让大家控制网页的样式和布局。其中，使用 CSS 来让图片完美地铺满整个区域是非常实用的技巧。 在实现这一效果时，大家可以借助 CSS 中的 `background-size` 属性。该属性用于指定背景图像的大小。具体来说，大家可以将 `background-size` 设置为 `cover`，这样背景图像就会自动缩放以铺满整个区域。代码如下：

.wrapper {
background-image: url("example.jpg");
background-size: cover;
background-position: center center;
}

在上面的代码中，大家将 `background-image` 指定为要铺满区域的图片，然后使用 `background-size: cover` 来让图片铺满整个区域。同时，还可以使用 `background-position` 将图片放置在区域的正中央。 除了 `cover` 属性之外，大家还可以使用 `contain` 属性来让图片按比例缩放以适应区域大小。具体来说，将代码修改为以下形式即可：

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

其中，`background-repeat` 属性用于禁止图片的重复。在使用 `contain` 属性时，还可以通过组合使用 `min-width` 和 `min-height` 属性来设置图片的最小宽度和最小高度，确保图片不会因过度缩小而失真。 最后，需要注意的是，以上两种方法都是通过将图片作为背景图像来实现的。如果要将图片完全嵌入到网页中，可以考虑使用 `object-fit` 属性。具体使用方式可以参考相关教程。 总之，CSS 中的 `background-size` 属性可以帮助大家轻松地实现让图片完美铺满整个网页区域的效果。这是一个非常实用的技巧，在网页设计中必不可少。