上一节:
下一节:

  CSS 背景

  • CSS背景属性

    CSS背景属性用于定义元素的背景效果。CSS背景属性：
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position

  • 背景颜色

    用background-color属性指定元素的背景颜色。页面的背景颜色设置如下： 
    body {
 background-color: lightblue;
}
    尝试一下
    使用CSS，颜色通常由以下指定：
    • 有效的颜色名称 - 如“红色”
    • 一个十六进制值 - 比如“＃ff0000”
    • RGB值 - 如“rgb(255,0,0)”
    在下面的示例中，<h1>，<p>和<div>元素具有不同的背景颜色： 
    h1 {
 background-color: green;
}

div {
 background-color: lightblue;
}

p {
 background-color: yellow;
}
    尝试一下

  • 背景图片

    background-image属性指定要用作元素背景的图像。 默认情况下，图像会重复，因此它会覆盖整个元素。页面的背景图像可以设置如下： 
    body {
 background-image: url("/images/paper.gif");
}
    尝试一下
    下面是文本和背景图像组合不良的示例。该文字难以阅读： 
    body {
 background-image: url("/images/bgdesert.jpg");
}
    尝试一下
    注意：使用背景图像时，请使用不会干扰文本的图像。

  • 背景图像 - 水平或垂直重复

    默认情况下，background-image属性在水平和垂直方向上重复图像。有些图像只能水平或垂直重复，否则看起来很奇怪，如下所示： 
    body {
 background-image: url("/images/gradient_bg.png");
}
    尝试一下
    如果上面的图像只是水平重复（background-repeat: repeat-x;），背景看起来会更好： 
    body {
 background-image: url("/images/gradient_bg.png");
 background-repeat: repeat-x;
}
    尝试一下
    提示：要垂直重复图像，请进行设置background-repeat: repeat-y;

  • 背景图像 - 设置位置和不重复

    仅显示背景图像一次也由background-repeat属性指定： 
    body {
 background-image: url("/images/img_tree.png");
 background-repeat: no-repeat;
}
    尝试一下
    在上面的示例中，背景图像显示在与文本相同的位置。我们想要改变图像的位置，这样它就不会过多地干扰文本。图像的位置由background-position属性指定： 
    body {
 background-image: url("/images/img_tree.png");
 background-repeat: no-repeat;
 background-position: right top;
 margin-right: 200px;
}
    尝试一下

  • 背景图片 - 固定位置

    要指定应修复背景图像（不会与页面的其余部分一起滚动），请使用background-attachment属性： 
    body {
 background-image: url("/images/img_tree.png");
 background-repeat: no-repeat;
 background-position: right top;
 margin-right: 200px;
 background-attachment: fixed;
}
    尝试一下

  • 背景 - 速记属性

    要缩短代码，还可以在一个属性中指定所有背景属性。这被称为速记属性。背景的速记属性是background： 
    body {
 background: #ffffff url("/images/img_tree.png") no-repeat right top;
 margin-right: 200px;
}
    尝试一下
    使用速记属性时，属性值的顺序为：
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
    如果其中一个属性值丢失，则无关紧要，只要其他属性值按此顺序排列即可。

  • 所有CSS背景属性

    属性 描述
    background 在一个声明中设置所有background属性
    background-attachment 设置背景图像是固定的还是与页面的其余部分一起滚动
    background-clip 指定背景的绘制区域
    background-color 设置元素的背景颜色
    background-image 设置元素的背景图像
    background-origin 指定背景图像的位置
    background-position 设置背景图像的起始位置
    background-repeat 设置背景图像将如何重复
    background-size 指定背景图像的大小

  • 相关页面

    HTML教程：HTML样式
上一节:
下一节: