核心知识
背景颜色与背景图片
背景画在内容后面,用来装饰活动卡片;活动时间、地点仍然用 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。