Skip to main content

CSS背景

CSS背景属性用于定义元素的背景效果。影响HTML元素的CSS背景属性有5个：

translate failed

  1. 背景色
  2. 背景图像
  3. 背景重复
  4. 背景附件
  5. 背景位置

1） CSS背景色​

background color属性用于指定元素的背景色。

您可以如下设置背景色：

translate failed

<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
    background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello Javatpoint. This is an example of CSS background-color.</p>
</body>
</html>

输出：

我的第一个CSS页面。​

你好，Javatpoint。这是CSS背景色的一个例子。

2） CSS背景图像​

背景图像属性用于将图像设置为元素的背景。默认情况下，图像覆盖整个元素。你可以为这样的页面设置背景图像。

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
</body>
</html>

注：背景图像应根据文本颜色选择。文本和背景图像的糟糕组合可能是网页设计不佳、不可读的原因。

3） CSS背景重复​

默认情况下，“背景图像”属性水平和垂直重复背景图像。有些图像只在水平或垂直方向上重复。

如果只水平重复图像，背景看起来会更好。

背景重复：重复-x；

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
</body>
</html>

背景重复：重复-y；

translate failed

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
</body>
</html>

4） CSS背景附件​

background attachment属性用于指定背景图像是固定的，还是在浏览器窗口中与页面的其余部分一起滚动。如果设置了固定的背景图像，则在浏览器中滚动时图像不会移动。允许以固定背景图像为例。

background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed;

5） CSS背景位置​

背景位置属性用于定义背景图像的初始位置。默认情况下，背景图像位于网页的左上角。

您可以设置以下位置：

  1. 居中
  2. 顶部
  3. 底部
  4. 左边
  5. 正当
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;