HTML 背景图片
几乎任何 HTML 元素都可以指定背景图片。
HTML 元素的背景图片
要为 HTML 元素添加背景图片,请使用 HTML 的 style
属性和 CSS 的 background-image
属性。
您也可以在 <head>
部分的 <style>
元素中指定背景图片。
页面背景图片
如果您想让整个页面都有背景图片,则必须在 <body>
元素上指定背景图片。
背景重复
如果背景图片比元素小,图片将水平和垂直地重复自身,直到到达元素的末尾。
要避免背景图片重复,请将 background-repeat
属性设置为 no-repeat
。
示例
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
自己动手试一试 »
背景覆盖
如果您希望背景图片覆盖整个元素,可以将 background-size
属性设置为 cover.
。
此外,为了确保整个元素始终被覆盖,请将 background-attachment
属性设置为 fixed:
。
这样,背景图片将覆盖整个元素,而不会拉伸(图片将保持其原始比例)。
示例
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
自己动手试一试 »
背景拉伸
如果您希望背景图片拉伸以适应整个元素,可以将 background-size
属性设置为 100% 100%
。
尝试调整浏览器窗口的大小,您会看到图片会拉伸,但始终覆盖整个元素。
示例
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
自己动手试一试 »
了解更多 CSS
从上面的示例中,您已经了解到背景图片可以通过 CSS 的 background 属性进行样式设置。
要了解更多关于 CSS background 属性的信息,请学习我们的 CSS 背景教程。