CSS 背景：多彩背景

CSS 背景属性

核心属性

.hero {
  background-image: url('bg.jpg');
  background-size: cover;        /* 覆盖整个容器 */
  background-position: center;   /* 居中 */
  background-repeat: no-repeat;  /* 不重复 */
  background-attachment: fixed;  /* 视差滚动效果 */
}

简写

background: url('bg.jpg') center/cover no-repeat;

多背景

background:
  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url('bg.jpg') center/cover;
/* 渐变叠加在图片上，做暗色遮罩 */