⚙️ 1. 基础语法

• background-image

设置背景图片路径（支持相对/绝对路径或在线 URL）：

selector {    background-image: url("image.jpg"); /* 单张图片 */    background-image: url("image1.jpg"), url("image2.jpg"); /* 多张图片（逗号分隔） */}

多张图片时，先指定的图片层级更高（覆盖后指定的图片）。

此时图片会和文字重叠，整个观感很混乱：

你可以看到<h1>文字的后面不仅被图片重叠，而且此时有两张呈纵向分布的logo图。别担心，我们一步步来，首先是logo重复的问题，这涉及到图片的平铺方式。

🔍 2. 关键辅助属性

• background-repeat

控制图片平铺方式：

background-repeat: repeat;    /* 默认：水平和垂直平铺 */background-repeat: no-repeat;  /* 不平铺 */background-repeat: repeat-x;   /* 仅水平平铺 */background-repeat: repeat-y;   /* 仅垂直平铺 */

如上所说，如果你只想让logo显示一张图片，这时使用background-repeat: no-repeat; 就可以解决。

接着如何将logo图片移动位置呢？这就需要用到我们上篇讲到的position语法。

• background-position

定位logo图片起始位置（比如使其居中）

background-position: center top;     /* 关键词：top/right/bottom/left/center */background-position: 20px 50%;        /* 混合单位：水平位置 垂直位置 */

注意：

◦ 单值时另一方向默认居中（如 background-position: top; → 水平居中，垂直靠顶）。

 ◦ 双值顺序：水平在前，垂直在后。

此时，我们已经将logo图片调整到适当位置，由于，<h1>文字不可直接删除，那该如何去除呢？接下来就轮到“文字缩排”语法登场了。

📐 首行缩进：text-indent

语法：

selector {    text-indent: 值; /* 支持单位：px, em, %, rem */}

我们要达到看不见文字的效果，就可以用这个语法将<h1>文字推到很远很远很远的地方。

这样，既不影响咱们的搜索引擎优化，同时又能让我们的网站呈现简洁美观的logo图，一箭双雕。

好啦，经过今天的内容，我们已经将网站的页首处理好了。下篇我们会将继续用CSS设计好网站剩余的版面，又会引入哪些实用又易上手的新语法呢？总之一句话，敬请期待吧！

阅读原文​