7、CSS 背景

CSS 背景属性

属性 —————————————————— 描述

  • background ————————————— 简写属性，作用是将背景属性设置在一个声明中。
  • background-attachment———————— 背景图像是否固定或者随着页面的其余部分滚动。
  • background-color ———————————设置元素的背景颜色。
  • background-image —————————— 把图像设置为背景。
  • background-position —————————设置背景图像的起始位置。
  • background-repeat ——————————设置背景图像是否及如何重复。

1) background-color 属性，背景色
如：p { background-color: #cff; padding: 5px; }

2) background-image 属性，背景图像
如：body { background-image: url(image/背景1.jpg); }

3）background-repeat 属性，背景重复
background-repeat 设置是否及如何重复背景图像。值如下

  • repeat 默认。背景图像将在垂直方向和水平方向重复。
  • repeat-x 背景图像将在水平方向重复。
  • repeat-y 背景图像将在垂直方向重复。
  • no-repeat 背景图像将仅显示一次。

4) background-position 属性，背景定位
有以下三种值
top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right
x% y% 第一个值是水平位置，第二个值是垂直位置。
xpos ypos 第一个值是水平位置，第二个值是垂直位置。

5) background-attachment 属性，背景关联
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
值如下：

  • fixed 当页面的其余部分滚动时，图像固定，背景图像不会移动。
  • scroll 默认值。背景图像会随着页面其余部分的滚动而移动。

6) background 简写属性
在一个声明中设置所有的背景属性。
如：background: url(images/1.png) no-repeat fixed center;

例：

<html>
<head>
<title>CSS</title>
<style>
body {
  background-color: #cff;
  background-image: url(images/2.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 1400px 600px;
/*    background: #cff url(images/2.png) no-repeat fixed center;   */
}
h1 {
  text-align: center;
}
p {
  font-size: 24pt;
  color: azure
}
</style>
</head>
<body>
<h1>宜春学院</h1>
<p>宜春学院座落于风景秀丽的宜春市城西文教新区，占地面积达1250多亩。
  新校园依山傍水，风光旖旎；南邻浙赣线，西接320国道；
  交通便利，地理位置优越，是莘莘学子读书研学的理想之地。</p>
</body>
</html>

图片说明