css背景图片等比例缩放

作者：放电的牛发布日期:2025-04-16 浏览:110

/* 设置背景图片等比例缩放 */
.background-image {
  background-image: url('your-image-url.jpg'); /* 替换为你的图片路径 */
  background-size: contain; /* 使背景图片在容器内等比例缩放，保持宽高比 */
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */
  width: 100%; /* 容器宽度 */
  height: 100%; /* 容器高度 */
}

解释说明：

background-image: 指定背景图片的路径。
background-size: contain: 确保图片在容器内等比例缩放，并且完全可见。图片可能会有空白区域，但不会被裁剪。
background-repeat: no-repeat: 防止图片在水平或垂直方向上重复。
background-position: center: 将图片居中显示在容器中。
width 和 height: 设置容器的宽度和高度，确保容器有足够的空间来显示背景图片。

上一篇：css文字删除线

下一篇：css 渐变字体