给活动卡片添加背景颜色和图片

第 9 课 9 / 25 ｜编码：L09-12a

HTML 保留活动文字；三张同样大小的卡片，从左到右，只增加 CSS 背景设置。

周三下午 · A208

三例共用的 HTML：

<article class="poster">
  <h3>黄梅戏分享会</h3>
  <p>周三下午 · A208</p>
</article>

三张卡片都使用这份 HTML。标题、时间和地点是文字，不是图片的一部分。

周三下午 · A208

为 .poster 设置底色：

.poster {
  background-color: #fff1da;
}

background-color 设置卡片底色；#fff1da 是这里的浅黄色。

周三下午 · A208

接着②，在 .poster 中添加：

background-image:
  url("demo/stage-background.svg");
background-repeat: no-repeat;
background-position: center;

url(...) 指定图片；no-repeat 只画一份；center 居中放置。

补充：卡片大小、文字底板与图片路径

三例共用相同的高度、内边距和边框；标题与时间行共用白色底板，让文字在图片上仍然清楚。这些共同样式不参与背景效果的比较。

背景图片不会撑开元素。即使图片加载失败，HTML 文字仍然存在，卡片大小仍由布局、尺寸设置与内容等决定。

背景图片画在底色上方：图片不透明的部分会遮住底色；图片未覆盖、透明或加载失败的地方，可以看到底色。

本页在 HTML 中设置背景，demo/stage-background.svg 指向本页旁边的 demo 文件夹。若把样式放进外部 CSS 文件，相对路径就从该 CSS 文件所在目录算起。