一、基本设置
使用 CSS 可以通过以下属性设置背景图片:
background-image
: 设置背景图片的 URL。background-size
: 设置背景图片的大小。可以设置为绝对像素值,也可以设置为百分比或 "cover"(填充整个容器)或 "contain"(完整显示图片)。background-repeat
: 设置背景图片是否重复。可以设置为 "repeat"(重复)、"no-repeat"(不重复)、"repeat-x"(横向重复)或 "repeat-y"(纵向重复)。background-position
: 设置背景图片的位置。可以设置为绝对像素值,也可以设置为百分比或关键字(如 "center"、"top"、"bottom"、"left" 或 "right")。
例如:
.bg-img {
background-image: url("bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
二、具体场景设置
1、设置左侧区域背景图片高度填充整个可视区域,图片宽度自适应
.left-bg-img {
height: 100vh;
width: 40vw;
background: url("bg.jpg") no-repeat left;
background-size: contain;
}
标签:bg,background,repeat,背景图片,设置,CSS,size From: https://www.cnblogs.com/yuzhihui/p/17077849.html