本章教您如何设置各种HTML元素的背景.您可以设置元素的以下背景属性 :
background-color 属性用于设置元素的背景颜色.
background-image 属性用于设置背景图像的背景图像.元素.
background-repeat 属性用于控制背景中图像的重复.
background-position 属性用于控制背景中图像的位置.
background-attachment 属性用于控制背景中图像的滚动.
background 属性用作速记来指定其他一些背景属性.
以下是演示如何设置元素背景颜色的示例.
< html> < head> </head> < body> < p > 此文本为黄色背景色. </p> </body> </html>
我们可以通过调用本地存储的图像来设置背景图像,如下所示:
<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-color: #cccccc; } </style> </head> <body> <h1>Hello World!</h1> </body> <html>
以下示例演示了如果图像很小,如何重复背景图像。 如果您不想重复图像,则可以对background-repeat属性使用无重复值,在这种情况下,图像只显示一次。
默认情况下,background-repeat属性将具有重复值。
<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-repeat: repeat; } </style> </head> <body> <p>Tutorials point</p> </body> </html>
以下示例演示如何垂直重复背景图像。
<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-repeat: repeat-y; } </style> </head> <body> <p>Tutorials point</p> </body> </html>
以下示例演示如何水平重复背景图像。
<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-repeat: repeat-x; } </style> </head> <body> <p>Tutorials point</p> </body> </html>
以下示例演示如何将背景图像位置设置为距离左侧100像素。
<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-position:100px; } </style> </head> <body> <p>Tutorials point</p> </body> </html>
以下示例演示如何将背景图像位置设置为距离左侧100像素,距离顶部200像素。
<html> <head> <style> body { background-image: url("/css/images/css.jpg"); background-position:100px 200px; } </style> </head> <body> <p>Tutorials point</p> </body> </html>
背景附件确定背景图像是固定的还是与页面的其余部分一起滚动。
以下示例演示如何设置固定背景图像。
<!DOCTYPE html> <html> <head> <style> body { background-image: url('/css/images/css.jpg'); background-repeat: no-repeat; background-attachment: fixed; } </style> </head> <body> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> </body> </html>
以下示例演示如何设置滚动背景图像。
<!DOCTYPE html> <html> <head> <style> body { background-image: url('/css/images/css.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-attachment:scroll; } </style> </head> <body> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> </body> </html>
您可以使用 background 属性可一次设置所有背景属性.例如 :
<p style = "background:url(/images/pattern1.gif) repeat fixed;"> This parapgraph has fixed repeated background image. </p>