极客教程CSS 背景
本章讲解了如何设置各种HTML元素的背景。您可以设置元素的以下背景属性-
- background-color 属性用于设置元素的背景颜色。
-
background-image 属性用于设置元素的背景图像。
-
background-repeat 属性用于控制背景中图像的重复。
-
background-position 属性用于控制背景中图像的位置。
-
background-attachment 属性用于控制背景中图像的滚动。
-
background 属性用作简写，指定其他多个背景属性。
设置背景颜色
以下是一个示例，演示如何为元素设置背景颜色。
<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属性的值为repeat。
<html>
<head>
<style>
body {
background-image: url("https://deepinout.com/logo.png");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Deepinout</p>
</body>
</html>
它将产生以下结果 −
下面的示例演示了如何垂直重复背景图像。
<html>
<head>
<style>
body {
background-image: url("https://deepinout.com/logo.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Deepinout</p>
</body>
</html>
它将产生以下结果−
以下示例演示如何水平重复背景图像。
<html>
<head>
<style>
body {
background-image: url("https://deepinout.com/logo.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Deepinout</p>
</body>
</html>
它将产生以下结果 –
设置背景图像位置
以下示例演示了如何将背景图像位置设置在距离左侧100像素的位置。
<html>
<head>
<style>
body {
background-image: url("https://deepinout.com/logo.png");
background-position:100px;
}
</style>
</head>
<body>
<p>Deepinout</p>
</body>
</html>
它将产生以下结果 –
以下示例演示如何将背景图像位置设置为距离左侧100像素，距离顶部200像素。
<html>
<head>
<style>
body {
background-image: url("https://deepinout.com/logo.png");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Deepinout</p>
</body>
</html>
它将产生以下结果−
设置背景附件
背景附件决定背景图像是固定还是随页面的其余部分滚动。
以下示例演示如何设置固定的背景图像。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://deepinout.com/logo.png');
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('https://deepinout.com/logo.png');
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>