这将教您如何设置各种HTML元素的背景。您可以设置元素的以下背景属性-
的 背景颜色 属性被用于设置一个元素的背景颜色。
的 背景图像 属性用于设置一个元素的背景图像。
的 背景重复 特性被用于控制在背景图像的重复。
该 背景位置 属性用于控制图像的背景中的位置。
的 背景附件 属性被用于控制在背景图像的滚动。
的 背景 属性被用作速记指定数目的其他背景属性。
下面的示例演示了如何设置元素的背景色。
<html> <head> </head> <body> <p style = "background-color:yellow;"> This text has a yellow background color. </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>以下示例演示了如果图像很小，如何重复背景图像。 如果不想重复图像，可以将 no-repeat 值用于 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>您可以使用 背景 属性一次设置所有的背景属性。例如-
<p style = "background:url(/images/pattern1.gif) repeat fixed;"> This parapgraph has fixed repeated background image. </p>