HTML 背景图片
❮ 上一篇 下一篇 ❯
几乎任何 HTML 元素都可以指定背景图片。
HTML 元素的背景图片
要为 HTML 元素添加背景图片，请使用 HTML 的 style 属性和 CSS 的 background-image 属性。
示例
为 HTML 元素添加背景图片
自己动手试一试 »
您也可以在
部分的自己动手试一试 »
页面背景图片
如果您想让整个页面都有背景图片，则必须在
元素上指定背景图片。示例
为整个页面添加背景图片
自己动手试一试 »
背景重复
如果背景图片比元素小，图片将水平和垂直地重复自身，直到到达元素的末尾。
示例
自己动手试一试 »
要避免背景图片重复，请将 background-repeat 属性设置为 no-repeat。
示例
自己动手试一试 »
背景覆盖
如果您希望背景图片覆盖整个元素，可以将 background-size 属性设置为 cover.。
此外，为了确保整个元素始终被覆盖，请将 background-attachment 属性设置为 fixed:。
这样，背景图片将覆盖整个元素，而不会拉伸（图片将保持其原始比例）。
示例
自己动手试一试 »
背景拉伸
如果您希望背景图片拉伸以适应整个元素，可以将 background-size 属性设置为 100% 100%。
尝试调整浏览器窗口的大小，您会看到图片会拉伸，但始终覆盖整个元素。
示例
自己动手试一试 »
了解更多 CSS
从上面的示例中，您已经了解到背景图片可以通过 CSS 的 background 属性进行样式设置。
要了解更多关于 CSS background 属性的信息，请学习我们的 CSS 背景教程。
❮ 上一篇 下一篇 ❯
★ +1
W3schools 学习路径
跟踪您的进度 - 免费！
登录 注册