CSS 背景

背景

CSS 背景属性用于定义HTML元素的背景

CSS 属性定义背景属性

• background-color：定义了CSS中任何元素的背景颜色
• background-image：允许在元素的背景中显示图像（一个或多个背景图像）
• background-repeat：用于控制图像的平铺行为
• background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动
• background-position：允许您选择背景图像显示在其应用到的盒子中的位置

background: bg-color bg-image bg-position bg-repeat bg-attachment initial|inherit;

1. 背景颜色

background-color属性设置一个元素的背景颜色

属性值：

• color：指定背景颜色。和文本颜色值一样可以为（颜色名，16进制，rgb，rgba，hsl，hsla）
• transparent：指定背景颜色应该是透明的。这是默认
• inherit：指定背景颜色，应该从父元素继承

background-color: red|#ff0000|rgb(255,0,0)|rgba(255,0,0,0.2)|hsl(120,100%,25%)| hsla(120,100%,25%,0.5)
background-color: transparent

2. 背景图像

background-image 属性设置一个元素的背景图像（一个或多个背景图像）

元素的背景是元素的总大小，包括填充和边界（但不包括边距）

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向

属性值：

• url：图像的URL
• none：无图像背景会显示。这是默认
• inherit：指定背景图像应该从父元素继承

background-image: url("image/1.jpeg")|none;

也可以有多个背景图像——在单个属性值中指定多个background-image值，用逗号分隔每个值

• 不同属性的每个值，将与其他属性中相同位置的值匹配

• 当不同的属性具有不同数量的值时，前面属性值匹配完后剩余的属性值会重新循环一次赋予前面的值

background-image: url("image/1.jpeg"), url("image/2.jpeg"), url("image/3.jpeg")
background-position: center top;
/* 这里图像1的背景定位值为center,图像2的为top,图像3会循环匹配定位置为center */

3. 背景平铺

background-repeat 属性用于控制图像的平铺行为

• no-repeat： 不重复
• repeat-x： 水平重复
• repeat-y： 垂直重复
• repeat： 在两个方向重复
• inherit：指定background-repeat 属性设置应该从父元素继承

background-repeat: no-repeat|repeat-x|repeat-y|repeat;

4. 背景定位

background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置

使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位

• 关键字

  • left top
    left center
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom
  • 如果仅指定一个关键字，其它值将会是center

• x% y%

  • 第一个值是水平位置，第二个值是垂直
  • 左上角是0％0％，右下角是100％100％
  • 如果仅指定了一个值，其他值将是50％，默认值为：0％0％

• xpos ypos

  • 第一个值是水平位置，第二个值是垂直
  • 左上角是0，单位可以是像素（0px 0px）或任何其他 CSS单位
  • 如果仅指定了一个值，其他值将是50％，你可以混合使用 ％和 xpos ypos

• inherit：指定background-position属性设置应该从父元素继承

background-position: 关键字|x% y%|xpos ypos;  

5. 背景滚动

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动

• scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动
• fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置
• local: 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动
• initial：设置该属性的默认值
• inherit：指定 background-attachment 的设置应该从父元素继承

background-attachment：scroll|fixed|local|initial

6. 链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）

四种链接状态分别是：

• a:link - 正常的，未访问的链接
• a:visited - 用户访问过的链接
• a:hover - 用户将鼠标悬停在链接上时
• a:active - 链接被点击时

a:link {color: #00a8ff;}
a:visited {color: #9c88ff;}
a:hover {color: #fbc531;}
a:active {color: #4cd137;}

如果为多个链接状态设置样式，请遵循如下顺序规则：

如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨

• a:hover 必须 a:link 和 a:visited 之后
• a:active 必须在 a:hover 之后

7. 链接的文本装饰

text-decoration 属性主要用于从链接中删除下划线。默认情况下链接标签是有下划线装饰的

a {text-decoration: none;}
/* 无文本装饰 */

8. 链接背景色

background-color 属性可用于指定链接的背景色

a {background-color: #3496db;}