Day13 原来Background可以有这麽多设定

Background包含哪些属性?

Background是缩写，包含了以下几个CSS属性

1. background-color
2. background-image
3. background-position
4. background-repeat
5. background-size
6. background-origin
7. background-attachment
8. background-clip

因为第6~8个，我没有实际使用过，所以会着重於前面1~5使用过却没有认真去钻研的那些属性。

参考资料: Background - 金鱼都能懂的CSS必学属性
background

1. background-color 设定背景颜色

从名称就可以知道，是用来设定背景的颜色
例如:
background-color: brown;

2. background-image 将图片设定成背景

一直以为只能设定一张图片作为背景，查了之後才知道原来可以设定一个以上的图片作为背景
例如:
background-image: url(" ");
background-image: url(""), url("");

参考资料:background-image

3. background-position 设定背景图片的位置

常和background-image、background-repeat 搭配使用，让背景图片靠上、下、左、右或是置中显示。
background-position 预设以左上角为起点，能控制的位置移动方式有水平的X轴移动和垂直的Y轴移动，不包含前後的Z轴。

background-position 常用来设定的值有以下几种:

• 关键字(Keyword values): top or bottom(Y轴关键字), left or right(X轴关键字), center
• 百分比(percentage values): %
• 长度(length values): cm, inch, em,...

background-position语法

background-position最多可以用到四个值来作设定
例如:
background-position:top;
background-position: 25% 75%;
background-position: bottom 10px right;
background-position: bottom 50px right 100px;

background-position 关键字使用时要注意的事

1. 如果仅使用一个值，另一个值会预设成置中center，就不用同时设定X、Y轴
   例如:
   background-position: center; 设定背景图片水平垂直居中於该容器中
   background-position: left; 设定背景图片「水平靠左，垂直居中」
   background-position: right; 设定背景图片「水平靠右，垂直居中」
   background-position: top; 设定背景图片「水平居中，垂直靠上」
   background-position: bottom; 设定背景图片「水平居中，垂直靠上」

2. 使用两个值做设定，如果第一个值用的是Y轴的关键字(top or bottom)，另一个值就会变成是用来设定X轴
   例如:
   background-position: top right;

3. center这个关键字和其他值一起使用时，会变成是X轴先Y轴後的顺序来设定
   例如:
   background-position: 50px center; 背景图片位置会是在离容器左侧 50px 位置并垂直居中
   background-position: center 50px; 背景图片位置会是水平居中，并离容器顶端50px

参考资料:Background-position- 金鱼都能懂的CSS必学属性

4. background-repeat 背景图片设定成重复拼贴填满容器

background-repeat的主要用途是当背景图片比容器尺寸小的时候，可以设定以拼贴的方式将容器的范围填满

background-repeat能设定的值有以下几个:

• background-repeat: repeat; (预设) 设定背景图片垂直水平都重复 多出来的图片会被裁切掉
• background-repeat: repeat-x; 设定背景图片水平重复 设定同background-repeat:repeat no-repeat; 多出来的图片会被裁切掉。
• background-repeat: repeat-y; 设定背景图片垂直重复 设定同background-repeat:no-repeat repeat; 多出来的图片会被裁切掉。
• background-repeat: space; 背景图片会在不裁切的状态下，尽可能重复，如果有剩余容器空间无法被图片填满，会自动均分剩余的空间范围
• background-repeat: round; 背景图片会被改变大小，且在不裁切的状态下，重复拼贴将容器的范围填满。
• background-repeat: no-repeat; 设定背景图片不重复拼贴。

参考资料:background-repeat
Background-repeat- 金鱼都能懂的CSS必学属性

5. background-size 设定背景图片的尺寸

background-size 常用的设定方式有以下几种:

• 关键字: contain, cover
  background-size:contain;
  图片原来的宽高比不会被改变，会缩放到背景图片能完全显示在容器中，所以会有留白区域

  background-size:cover;
  将背景图片填满整个容器，若背景图片小於容器时，会宽高等比例地放大填满容器，且超出容器范围的图片会被切 掉，容易造成失真。

  参考资料: background-size

• 设定一个值，该值会代表宽度，高度就会变成预设auto
  例如:
  background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

• 设定两个值，第一个值代表宽度，第二个值代表高度
  例如:
  background-size: 3em 25%;

  通常不会用background-size去修改图片的尺寸，而是会用影像编辑软件将要放在网页上的图片直接改成要用的大 小，以避免影响传输的速度。

参考资料:
Background-size

Background-size- 金鱼都能懂的CSS必学属性

6. background-origin 定位背景图片?

这是一个我根本没用过的属性 看完一些解释 我还是有点困惑
目前的理解是这个属性的用途是定位背景图片 感觉不是太实用 也想不到要用在什麽时间点?
以内容框为基准来改变背景图片的位置

background-origin 设定的方式

• background-origin: padding-box;
• background-origin: border-box;
• background-origin: content-box;

参考资料: MDN- background-origin W3SCHOOL- background-origin

7. background-attachment 将背景图案设定成在拉动卷轴之後，仍可以显示在固定位置

• background-attachemnt:scroll; 当网页卷动时，背景图案会跟着页面滚动来移动 (预设)
• background-attachment:fixed; 设定背景图案在萤幕上固定，即使是网页卷动时，背景图案仍固定显示

参考资料:
Background-attchment- 金鱼都能懂的CSS必学属性
CSS没有极限 - 意想不到的background-attachment

8. background-clip 设定背景图片延伸位置

background-clip设定的值主要有以下几种:

• background-clip: border-box;
• background-clip: padding-box;
• background-clip: content-box;
• background-clip: text;
  参考资料:background-clip

以上为个人学习笔记整理
若有错误，欢迎指正