“HTML背景图片”的版本间差异
本页内容
无编辑摘要 |
无编辑摘要 |
||
(未显示同一用户的4个中间版本) | |||
第1行: | 第1行: | ||
[[Category:HTML教程|20]] | [[Category:HTML教程|20]] | ||
几乎可以为任何 HTML 元素指定背景图像。 | 几乎可以为任何 HTML 元素指定背景图像。 | ||
== HTML 元素上的背景图片 == | == HTML 元素上的背景图片 == | ||
要在 HTML 元素上添加背景图像,请使用 HTML''' <nowiki>style</nowiki> '''属性和 CSS''' <nowiki>background-image</nowiki> '''属性: | |||
<sample title="" hererun="s" desc="Add a background image on a HTML element:" > | |||
<p style="background-image: url('/favicon.ico');"> 背景图片</p> | |||
</sample> | |||
<sample title="" desc="Add a background image on a HTML element:" > | |||
还可以在''' <nowiki><style></nowiki> ''' 中指定背景图像 | |||
<sample title="" hererun="s" desc="在''' <nowiki><style></nowiki> ''' 元素中指定背景图片:" > | |||
<style>p { background-image: url('/favicon.ico'); }</style> | |||
<p>背景图片</p> | |||
</sample> | |||
== 页面上的背景图 == | |||
如果希望整个页面都有背景图片,则必须在''' <nowiki><body></nowiki> '''元素上指定背景图片: | |||
<sample title="" hererun="s" desc="为整个页面添加背景图片:" > <style>body { background-image: url('/favicon.ico'); }</style> | |||
<p>背景图片</p> | |||
</sample> | |||
== | ==背景重复== | ||
如果背景图像小于元素,图像将在水平和垂直方向上重复,直到到达元素的末尾: | |||
<sample title="" hererun="s" desc="" > | |||
<style>body { background-image: url('/favicon.ico');}</style> | |||
<body width="100%" height="100%"> | |||
</body> | |||
</sample> | |||
为避免背景图像重复出现,请将''' <nowiki>background-repeat</nowiki> '''属性设置为''' <nowiki>no-repeat</nowiki> '''. | |||
<sample title="" hererun="s" desc="" > | |||
<style>body { background-image: url('/favicon.ico'); background-repeat: no-repeat;}</style> | |||
<body width="100%" height="100%"> | |||
</body> | |||
</sample> | |||
==背景封面== | |||
如果希望背景图片覆盖整个元素,可以将''' <nowiki>background-size</nowiki> '''属性设置为 ''' <nowiki>cover.</nowiki> ''' | |||
此外,为确保始终覆盖整个元素,请将 ''' <nowiki>background-attachment</nowiki> '''属性设置为''' <nowiki>fixed:</nowiki> ''' | |||
这样,背景图像将覆盖整个元素,没有拉伸(图像将保持其原始比例): | |||
<sample title="" hererun="s" desc="" > | |||
<sample title="" desc="" > | <style>body { background-image: url('/favicon.ico'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }</style> | ||
<body width="100%" height="100%"> | |||
</body> | |||
</sample> | |||
== 背景拉伸 == | |||
如果您希望背景图像拉伸以适合整个元素,您可以将''' <nowiki>background-size</nowiki> '''属性设置为 ''' <nowiki>100% 100%</nowiki> ''': | |||
background- | |||
< | |||
== | |||
如果您希望背景图像拉伸以适合整个元素,您可以将''' background-size '''属性设置为 | |||
''' 100% 100% ''': | |||
尝试调整浏览器窗口的大小,您会看到图像会拉伸,但始终会覆盖整个元素。 | 尝试调整浏览器窗口的大小,您会看到图像会拉伸,但始终会覆盖整个元素。 | ||
<sample title="" hererun="s" desc="" > | |||
<sample title="" desc="" > | <style>body { background-image: url('/favicon.ico'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; }</style> | ||
<body width="100%" height="100%"> | |||
</body> | |||
background-size: 100% 100%; | </sample> | ||
2022年8月4日 (四) 17:26的最新版本
几乎可以为任何 HTML 元素指定背景图像。
HTML 元素上的背景图片
要在 HTML 元素上添加背景图像,请使用 HTML style 属性和 CSS background-image 属性:
示例
Add a background image on a HTML element:
<p style="background-image: url('/favicon.ico');"> 背景图片</p>
还可以在 <style> 中指定背景图像
示例
在'''
<style></nowiki> ''' 元素中指定背景图片:" >
<style>p { background-image: url('/favicon.ico'); }</style>
<p>背景图片</p>
页面上的背景图
如果希望整个页面都有背景图片,则必须在 <body> 元素上指定背景图片:
示例
为整个页面添加背景图片:
<style>body { background-image: url('/favicon.ico'); }</style>
<p>背景图片</p>
背景重复
如果背景图像小于元素,图像将在水平和垂直方向上重复,直到到达元素的末尾:
示例
<style>body { background-image: url('/favicon.ico');}</style>
<body width="100%" height="100%">
</body>
为避免背景图像重复出现,请将 background-repeat 属性设置为 no-repeat .
示例
<style>body { background-image: url('/favicon.ico'); background-repeat: no-repeat;}</style>
<body width="100%" height="100%">
</body>
背景封面
如果希望背景图片覆盖整个元素,可以将 background-size 属性设置为 cover.
此外,为确保始终覆盖整个元素,请将 background-attachment 属性设置为 fixed:
这样,背景图像将覆盖整个元素,没有拉伸(图像将保持其原始比例):
示例
<style>body { background-image: url('/favicon.ico'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }</style>
<body width="100%" height="100%">
</body>
背景拉伸
如果您希望背景图像拉伸以适合整个元素,您可以将 background-size 属性设置为 100% 100% :
尝试调整浏览器窗口的大小,您会看到图像会拉伸,但始终会覆盖整个元素。
示例
<style>body { background-image: url('/favicon.ico'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; }</style>
<body width="100%" height="100%">
</body>