CSS - 背景

发表于   |   分类于   |  
属性 描述
background-color 元素的背景颜色
background-image 元素的背景图片
background-position 背景图片的起始位置
background-attachment 背景图片是否固定
background-repeat 背景图片是否重复及如何重复

background-color

背景颜色的值可以是颜色的英文名，Hex 和 RGB。background-color 的作用区域包括内容，内边距 padding 和边框，不包括外边距 margin。

background-color 有一个特殊的值 transparent ，它是全透明黑色的标识，类似 rgba(0,0,0,0)。当我们不希望元素有背景颜色，且不希望浏览器的设置影响到元素的背景颜色，可以通过 transparent 设定。

应该是类似 iOS 中 color = clear，背景色是透明的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>background-color</title>
  <style media="screen">
    div {
      width: 300px;
      height: 300px;
      background-color: red;
      padding: 10px;
      margin: 20px;
      text-align: center;
      line-height: 300px;
      border-width: 20px;
      border-style: dashed;
    }
  </style>
</head>
<body>
  <div class="">
    background-color
  </div>
</body>
</html>

background-image

用于设定元素的背景图片，background-image 覆盖的位置与 background-color 一致，默认左上角是起始位置，并在水平和垂直方向上重复。background-image 的值可以是绝对地址，也可以是相对地址，语法是 url(...) ，或者是 none，同时设定背景颜色和图片时，图片会覆盖背景颜色。

background-repeat

背景图片的重复方式使用 background-repeat 标记，它的值有以下几个：

值 描述
repeat 重复
no-repeat 不重复
repeat-x x 轴重复
repeat-y y 轴重复

background-attachment

用于标记图片的显示方式，有以下几个常用的值：

值 描述
scroll 默认值，背景图片跟随滚动条滚动。
fixed 当页面的其余部分滚动时，背景图片不会移动

background-position

background-position 有以下几个常用的值：

1
2
3
4
5
6
7
8
9
10
11
12
13
百分比:水平和垂直位置的百分比，如只写一个参数，第二个默认居中。
数值:水平和垂直位置的值，如只写一个参数，第二个默认居中。
top:顶部显示，等同于 x = 0，如只写一个参数，第二个默认居中。
bottom:底部显示，等同于 x = 100%，如只写一个参数，第二个默认居中。
right:左对齐，等同于 y = 0，如只写一个参数，第二个默认居中。
left:右对齐，等同于 y = 100%，如只写一个参数，第二个默认居中。
center:居中对齐，等同于 x = 50%, y = 50%

另外需要注意的是，当 background-attachment 是 fixed 时，位置是按浏览器窗口计算，当 background-attachment 是 scroll 时，位置是按父元素计算。