CSS背景

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

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

1)CSS背景色

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

您可以像这样设置背景颜色：

My first CSS page.
Hello Javatpoint. This is an example of CSS background-color.

 

输出：

My first CSS page.

Hello Javatpoint. This is an example of CSS background-color.

2)CSS背景图片

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

Hello Javatpoint.com

     

注意：应根据文本颜色选择背景图片。文字和背景图片的组合不好可能是导致网页设计不良和可读性差的原因。

3)CSS背景重复

默认情况下，background-image属性在水平和垂直方向上重复背景图像。有些图像仅水平或垂直重复。

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

背景重复：repeat-x;

Hello Javatpoint.com

 

背景重复：repeat-y;

Hello Javatpoint.com

 

4)CSS背景附加

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

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

5)CSS背景位置

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

您可以设置以下位置：

• center
• top
• bottom
• left
• right

background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;