HTML背景图像

亲自试一试 »

也可以在 部分的

亲自试一试 »

页面上的背景图像

如果希望整个页面具有背景图像，则必须在 元素上指定背景图像:

实例

为整个页面添加背景图像:

亲自试一试 »

背景重复

如果背景图像小于元素，则图像将在水平和垂直方向上重复自身，直到到达元素的末端:

实例

亲自试一试 »

要避免背景图像自身重复，请将 background-repeat 属性设置为 no-repeat。

实例

亲自试一试 »

背景封面

如果希望背景图像覆盖整个元素，可以将 background-size 属性设置为 cover。

另外，要确保始终覆盖整个元素，请将 background-attachment 属性设置为fixed::

这样，背景图像将覆盖整个元素，没有拉伸(图像将保持其原始比例):

实例

亲自试一试 »

背景拉伸

如果要拉伸背景图像以适合整个元素，可以将 background-size 属性设置为100% 100%:

尝试调整浏览器窗口的大小，您将看到图像将拉伸，但始终覆盖整个元素。

实例

亲自试一试 »

了解更多 CSS

从上面的例子中，您了解到，可以使用 CSS 背景属性来设置背景图像的样式。

了解有关CSS背景属性的更多信息: CSS Background 教程。

❮ 上一节

下一节 ❯