前端Wiki/CSS3/基础/边框与背景增强

多重背景与 background-size

CSS3 让背景的能力大幅增强。首先是多重背景：background-image 可以逗号分隔多个图层，先写的在最上层，每层都可独立指定位置和重复方式：

background-image: url(a.png), url(b.png), linear-gradient(...)——渐变也能作为一层背景参与叠加。

其次是 background-size 控制图片尺寸，两个关键字最常用：

cover：等比放大铺满容器，可能裁掉部分图片——做全屏头图必用。
contain：等比缩放到完整放入容器，可能留白。

配合 background-position（如 center center）控制裁剪时保留哪个部位；background-attachment: fixed 可以让背景不随滚动移动，做出视差感。

速记属性 background 可以一层写完 color/image/position/size/repeat，但 position 和 size 要用斜杠隔开：center / cover。

本节要点多重背景逗号分层、先写者在上层，渐变可作图层；cover 铺满可裁剪、contain 完整可留白；速记中 size 要写 position / size。

CSS

<style>
  .hero {
    height: 140px;
    border-radius: 8px;
    /* 多层背景：顶部高光渐变 + 底色 */
    background-image:
      linear-gradient(rgba(255,255,255,.3), transparent),
      linear-gradient(120deg, #39c5cf, #2667a0);
    background-size: cover;
    color: #fff;
    padding: 16px;
  }
  .logo {
    width: 60px; height: 60px;
    /* 两层小图标，分别定位到两角 */
    background-image:
      radial-gradient(circle at 30% 30%, #fff, #8fd3d8),
      radial-gradient(circle, #0288a6, #01475a);
    background-size: 60% 60%, 100% 100%;
    background-position: top left, center;
    background-repeat: no-repeat;
    border-radius: 50%;
  }
</style>
<div class="hero">
  多层背景的头图
  <div class="logo"></div>
</div>

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读