“HTML背景图片”的版本间差异
本页内容
无编辑摘要 |
无编辑摘要 |
||
| 第4行： | 第4行： | ||
几乎可以为任何 HTML 元素指定背景图像。 | 几乎可以为任何 HTML 元素指定背景图像。 | ||
== HTML | == HTML 元素上的背景图像 == | ||
要在 HTML 元素上添加背景图像，请使用 HTML''' <nowiki>style</nowiki> '''属性和 CSS''' <nowiki>background-image</nowiki> '''属性： | 要在 HTML 元素上添加背景图像，请使用 HTML''' <nowiki>style</nowiki> '''属性和 CSS''' <nowiki>background-image</nowiki> '''属性： | ||
<sample title="" desc=" | <sample title="" desc="在 HTML 元素上添加背景图像：" > <p style="background-image: url('img_girl.jpg');"> </sample> | ||
您还可以在''' <nowiki><style></nowiki> ''' 元素中指定背景图像，在以下''' <nowiki><head></nowiki> ''' 部分： | 您还可以在''' <nowiki><style></nowiki> ''' 元素中指定背景图像，在以下''' <nowiki><head></nowiki> ''' 部分： | ||
<sample title="" desc=" | <sample title="" desc="在''' <nowiki><style></nowiki> ''' 元素中指定背景图片：" > <style>p { background-image: url('img_girl.jpg'); }</style> </sample> | ||
== | == 页面上的背景图 == | ||
如果希望整个页面都有背景图片，则必须在''' <nowiki><body></nowiki> '''元素上指定背景图片： | 如果希望整个页面都有背景图片，则必须在''' <nowiki><body></nowiki> '''元素上指定背景图片： | ||
<sample title="" desc=" | <sample title="" desc="为整个页面添加背景图片：" > <style>body { background-image: url('img_girl.jpg'); }</style> </sample> | ||
== 背景重复 == | ==背景重复== | ||
如果背景图像小于元素，图像将在水平和垂直方向上重复，直到到达元素的末尾： | 如果背景图像小于元素，图像将在水平和垂直方向上重复，直到到达元素的末尾： | ||
| 第22行： | 第22行： | ||
<sample title="" desc="" > <style>body { background-image: url('example_img_girl.jpg'); background-repeat: no-repeat;}</style> </sample> | <sample title="" desc="" > <style>body { background-image: url('example_img_girl.jpg'); background-repeat: no-repeat;}</style> </sample> | ||
== 背景封面 == | ==背景封面== | ||
如果希望背景图片覆盖整个元素，可以将''' <nowiki>background-size</nowiki> '''属性设置为 ''' <nowiki>cover.</nowiki> ''' | 如果希望背景图片覆盖整个元素，可以将''' <nowiki>background-size</nowiki> '''属性设置为 ''' <nowiki>cover.</nowiki> ''' | ||
| 第30行： | 第30行： | ||
<sample title="" desc="" > <style>body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }</style> </sample> | <sample title="" desc="" > <style>body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }</style> </sample> | ||
== | == 背景 == | ||
如果您希望背景图像拉伸以适合整个元素，您可以将''' <nowiki>background-size</nowiki> '''属性设置为 ''' <nowiki>100% 100%</nowiki> '''： | 如果您希望背景图像拉伸以适合整个元素，您可以将''' <nowiki>background-size</nowiki> '''属性设置为 ''' <nowiki>100% 100%</nowiki> '''： | ||
2022年8月4日 (四) 17:15的版本
几乎可以为任何 HTML 元素指定背景图像。
HTML 元素上的背景图像
要在 HTML 元素上添加背景图像，请使用 HTML style 属性和 CSS background-image 属性：
示例
在 HTML 元素上添加背景图像：
<p style="background-image: url('img_girl.jpg');">您还可以在 <style> 元素中指定背景图像，在以下 <head> 部分：
示例
在'''
<style></nowiki> ''' 元素中指定背景图片：" > <style>p { background-image: url('img_girl.jpg'); }</style>页面上的背景图
如果希望整个页面都有背景图片，则必须在 <body> 元素上指定背景图片：
示例
为整个页面添加背景图片：
<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>