“HTML背景图片”的版本间差异

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>

@@ 第1行： / 第1行： @@
 [[Category:HTML教程|20]]
 几乎可以为任何 HTML 元素指定背景图像。
 == HTML 元素上的背景图片 ==
+要在 HTML 元素上添加背景图像，请使用 HTML''' <nowiki>style</nowiki> '''属性和 CSS''' <nowiki>background-image</nowiki> '''属性：
-要在 HTML 元素上添加背景图像，请使用 HTML''' style '''属性和 CSS''' background-image '''属性：
+<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:" >
-  <p style="background-image: url('img_girl.jpg');"> </sample>
-您还可以在''' <nowiki><style></nowiki> '''
-元素中指定背景图像，在以下''' <nowiki><head></nowiki> '''
-部分：
-<sample title="" desc="Specify the background image in the ''' <style> '''
-  element:" >
-  <style>p {  background-image: url('img_girl.jpg');
-  }</style> </sample>
-== 页面上的背景图片 ==
-If you want the entire page to have a background image, you must
-specify the background image on the ''' <body> ''' element:
-<sample title="" desc="Add a background image for the entire page:" >
-  <style>body {  background-image: url('img_girl.jpg');
-  }</style> </sample>
+还可以在''' <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>
-== Background Repeat ==
+==背景重复==
-If the background image is smaller than the element, the image will repeat itself,
+如果背景图像小于元素，图像将在水平和垂直方向上重复，直到到达元素的末尾：
-horizontally and vertically, until it reaches the end of the element:
+<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>
-  <style>body {  background-image: url('example_img_girl.jpg');}</style> </sample>
+<body width="100%" height="100%">
+</body>
+ </sample>
+== 背景拉伸 ==
-To avoid the background image from repeating itself, set the ''' background-repeat ''' property
+如果您希望背景图像拉伸以适合整个元素，您可以将''' <nowiki>background-size</nowiki> '''属性设置为 ''' <nowiki>100% 100%</nowiki> '''：
-to ''' no-repeat '''.
-<sample title="" desc="" >
-  <style>body {  background-image: url('example_img_girl.jpg');
-   background-repeat: no-repeat;}</style> </sample>
-== Background Cover ==
-If you want the background image to cover the entire element, you
-can set the ''' background-size ''' property to
-''' cover. '''
-Also, to make sure the entire element is always covered, set the
-''' background-attachment ''' property to ''' fixed: '''
-This way, the background image will cover the entire element, with no stretching (the image will
-keep its original proportions):
-<sample title="" desc="" >
-  <style>body {  background-image: url('img_girl.jpg');
-  background-repeat: no-repeat;  background-attachment: fixed;
-  background-size: cover;
-  }</style> </sample>
-== Background Stretch ==
-如果您希望背景图像拉伸以适合整个元素，您可以将''' 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>
-  <style>body {  background-image: url('img_girl.jpg');
+<body width="100%" height="100%">
-  background-repeat: no-repeat;  background-attachment: fixed;
+</body>
-   background-size: 100% 100%;
+ </sample>
-  }</style> </sample>
-== 了解更多 CSS ==
-从上面的示例中，您了解到可以使用 CSS 背景属性来设置背景图像的样式。
-要了解有关 CSS 背景属性的更多信息，请学习我们的CSS 背景教程。