第 9 课 9 / 25 | 编码:L09-12a
核心知识

背景颜色与背景图片

背景画在内容后面,用来装饰活动卡片;活动时间、地点仍然用 HTML 文字表达。

.poster {
  background-color: #fff1da;
  background-image:
    url("stage-background.svg");
  background-repeat: no-repeat;
  background-position: center;
}

演示 HTML 与 SVG 图片都在 demo 中。写在外部 CSS 里的相对路径,则相对于该 CSS 文件。

background-color 是底色;background-image 是它上方的图片层。

no-repeat:不平铺;center:居中摆放。本图另设 contain,下一页解释尺寸。

判断:背景图片未加载,卡片的宽高和活动文字会自动消失吗?
展开参考分析

不会因此自动消失。背景图片不撑开元素,盒子尺寸由布局、尺寸声明与内容等决定。底色仍可显示;标题、时间等文字应留在 HTML 中,而不是只写进背景图。

CSS 背景没有 alt 属性。需要表达内容含义的图片,通常使用带适当替代文本的 img。

打开独立背景演示(新标签页)