HTML背景图片
本页内容
几乎可以为任何 HTML 元素指定背景图像。
HTML 元素上的背景图片
要在 HTML 元素上添加背景图像,请使用 HTML style 属性和 CSS background-image 属性:
示例
Add a background image on a HTML element:
<p style="background-image: url('img_girl.jpg');">
您还可以在 <style> 元素中指定背景图像,在以下 <head> 部分:
示例
Specify the background image in the '''
<style></nowiki> ''' element:" > <style>p { background-image: url('img_girl.jpg'); }</style>
页面上的背景图片
如果希望整个页面都有背景图片,则必须在 <body> 元素上指定背景图片:
示例
Add a background image for the entire page:
<style>body { background-image: url('img_girl.jpg'); }</style>
背景重复
如果背景图像小于元素,图像将在水平和垂直方向上重复,直到到达元素的末尾:
示例
<style>body { background-image: url('example_img_girl.jpg');}</style>
为避免背景图像重复出现,请将 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>