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;