CSS - 背景( Backgrounds)
本章将教您如何设置各种HTML元素的背景。 您可以设置元素的以下背景属性 -
background-color属性用于设置元素的背景颜色。
background-image属性用于设置元素的背景图像。
background-repeat属性用于控制背景中图像的重复。
background-position属性用于控制图像在背景中的位置。
background-attachment属性用于控制背景中图像的滚动。
background属性用作指定许多其他背景属性的简写。
设置背景颜色
以下是演示如何设置元素背景颜色的示例。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "background-color:yellow;"</b>>
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>
它会产生以下结果 -
新页面打开重复背景图像
以下示例演示了如果图像很小，如何重复背景图像。 如果您不想重复图像，则可以对background-repeat属性使用no-repeat值，在这种情况下，图像只显示一次。
默认情况下， background-repeat属性将具有repeat值。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>IOWIKI</p>
</body>
</html>
它会产生以下结果 -
新页面打开以下示例演示如何垂直重复背景图像。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>IOWIKI</p>
</body>
</html>
它会产生以下结果 -
新页面打开以下示例演示如何水平重复背景图像。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>IOWIKI</p>
</body>
</html>
它会产生以下结果 -
新页面打开设置背景图像位置
以下示例演示如何将背景图像位置设置为距离左侧100像素。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>IOWIKI</p>
</body>
</html>
它会产生以下结果 -
新页面打开以下示例演示如何将背景图像位置设置为距离左侧100像素，距离顶部200像素。
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>IOWIKI</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 <b class="notranslate">style = "background:url(/images/pattern1.gif) repeat fixed;"</b>>
This parapgraph has fixed repeated background image.
</p>
