百度前端技术学院 第四天学习笔记（CSS背景）（1）

补充：margin和padding的区别

• 在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
• 在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内边距。

---

特别注意

• background内如果想要放background-size的值呢就必须有position的值才行
• 参考MDN
  并且，<background-size>值只能紧接在<position>后面，并以/字符分隔，例如：“ left/cover”。
• 不起作用：

background: url(上校.jpg) cover no-repeat fixed; 

• 起作用：

background: url(上校.jpg) left/cover no-repeat fixed;

background: url(上校.jpg) no-repeat fixed;

---

背景background总结

• 为了清晰地显示出段落和链接的背景图像，需要为它们设置了少许内边距（padding），外边距（margin）是没用的。

---

【推荐使用】background简写所有背景属性

编写background值时，需要遵循一些规则

例如：

1. background-color只能在最后一个逗号后指定。
2. background-size只能紧随在background-position后并以/字符分隔，如下所示：center/80%。
3. 所有注意事项

概述

body
  { 
  background : #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

• 通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持。
• 注意：属性值之间使用空格分隔开。如果使用多个背景，则需要为第一个背景指定所有属性，然后在逗号后添加下一个背景。
• 如果不设置其中的某个值，也不会出问题，所有省略的子值都将设置为其初始值。
• 可以设置如下属性：

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

例子

.box {
  background :  
    linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center 400px 200px no-repeat,/*渐变*/
    url(big-star.png) center no-repeat, /*background-size（400px 200px）只能紧随在background-position（center）后并以'/'字符分隔*/
    purple;/*紫色背景色要放在最后*/
}

---

background-color属性设置背景颜色

background-color: gray;

补充：

• rgba颜色中Alpha为色彩空间，也就是透明度/不透明度。它的范围为0.0到1.0之间，0.5为半透明。
• rgba(255,255,255,0)则表示完全透明的白色；
• rgba(0,0,0,1)则表示完全不透明的黑色；

---

background-image属性设置背景图片

background-image:url(C:/Users/HLZ/Desktop/百度前端/上校.jpg);
padding: 20px;

如果除了背景图像之外还指定了背景色，则图像会显示在该颜色的顶部:

.b {
  background-image: url(star.png);
  background-color:red;
}

---

background-size属性设置背景图片大小

background-size: length|percentage|cover|contain

• 属性值为length用法

  • 设置背景图像的高度和宽度。
  • 第一个值设置宽度，第二个值设置高度。
  • 如果只设置一个值，则第二个值会被设置为 “auto”。

    background-size:100px；  //背景图片显示的宽为100像素
    
    background-size:100px  160px；//背景图片显示的宽为100像素，高为600像素

• 属性值为percentage用法

  • 以父元素的百分比来设置背景图像的宽度和高度。
  • 第一个值设置宽度，第二个值设置高度。
  • 如果只设置一个值，则第二个值会被设置为 “auto”。

    background-size：60%； //背景图片的显示宽度和高度是图片大小60%；
    
    background-size：60%  80%； // 背景图片的显示宽度是图片大小的60%，高度是80%；

• 属性值为cover用法

  • 对图片进行等比缩放
  • 缩放背景图片以完全 覆盖 背景区，可能背景图片部分看不见。
  • 该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被 裁剪。

    background-size：cover；  //把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

• 注意：加上background-attachment: fixed;将图片固定在可视范围内时，图片把x轴拉满（反过来了）

• 属性值为contain用法:

  • 对图片进行等比缩放
  • 保证图片始终 完整 的显示在背景区域，不裁剪图片
  • 缩放背景图片以完全 装入 背景区，可能背景区部分空白。
  • 该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。

    background-size：contain； //把图像图像扩展至最大尺

    注意：加上background-attachment: fixed;将图片固定在可视范围内时，图片把y轴拉满（反过来了），x轴右边可能空缺一部分。

background-repeat属性设置背景重复

注意：不设置该属性则默认全屏重复（铺满）。

属性值
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

background-repeat: repeat-y;

background-position属性设置背景定位

注意

• 使用该属性之前需要先设置background-repeat:no-repeat; 确保图片不会被铺满整个页面。
• 位置关键字如果是一对则可以按任何顺序出现。如果是单个关键字和长度/百分比混合使用最好将lefy/right放在长度/百分比左边，将top/bottom放在长度/百分比右边。另，要保证不超过两个关键字(注意是关键字！background-position: top 20px right 10px; 表示将背景从顶部放置20px，从右侧放置10px)，一个对应水平方向，另一个对应垂直方向。

属性值
可以通过一对或单个关键字、百分数、长度值来给他提供值，如果使用单个则默认另一个关键字是 center。

使用关键字提供属性值

• top、bottom、left、right 和 center

background-image:url(C:/Users/HLZ/Desktop/百度前端/上校.jpg);
background-repeat:no-repeat;
background-position:top right;

使用百分数值提供属性值

• 百分数值同时应用于元素和图像
• 如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。
• background-position 的默认值是 0% 0%，在功能上相当于 top left。

  background-image:url(C:/Users/HLZ/Desktop/百度前端/上校.jpg);
  background-repeat:no-repeat;
  background-position:50% 50%;

• 其中心与其元素的中心对齐。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。
• 如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

使用长度值提供属性值

• 还可以使用长度值，如 100px 或 5cm。
• 长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
• 注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

  background-image:url(C:/Users/HLZ/Desktop/百度前端/上校.jpg);
  background-repeat:no-repeat;
  background-position:50px 100px;

• 比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。

属性值混合使用

1. 将背景从顶部放置20px，从右侧放置10px(只有两个关键词)：

   .box { 
     background-image: url(star.png); 
     background-repeat: no-repeat; 
     background-position: top 20px right 10px; 
   } 

   

2. 长度以及百分比：

   .box { 
     background-image: url(star.png); 
     background-repeat: no-repeat; 
     background-position: 20px 10%; 
   } 

   

3. 将关键字值与长度或百分比混合:
   

注意：只使用一个关键字的情况最好按照表格顺序，颠倒以后没有效果：

第一个属性值	第二个属性值
lefy/right	长度或百分比
长度或百分比	top/bottom

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px bottom;
}

background-attachment属性固定背景图片（背景关联）

• 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
• 通过设置属性值为fixed可以使图像固定。

属性值

• fixed：声明图像相对于可视区是固定的，因此不会受到滚动的影响。
• scroll：（默认值）也就是说，在默认的情况下，背景会随文档滚动。

  body {
      background-image url(CUsersHLZDesktop百度前端上校.jpg);
      background-size 200px;
      background-repeat no-repeat;
      background-attachment fixed;
  }

多个背景图像

• 在一个属性中可以指定多个值，并用逗号分隔每个值。
• 注意：可能最终得到彼此重叠的背景图像。背景将分层，最后列出的背景图像位于堆栈底部，而每个先前的图像堆栈均位于代码后的背景图像的顶部。

  background-image url(image1.png), url(image2.png), url(image3.png), url(image1.png);
  background-repeat no-repeat, repeat-x, repeat;
  background-position 10px 20px,  top right;

• 不同属性的每个值将与其他属性中相同位置的值匹配。例如，在上面image1的background-repeat值将为no-repeat。
• 当不同的属性具有不同数量的值时,数量较少的值会循环,在上面的示例中，有四个背景图像，但只有两个background-position值。前两个位置值将应用于前两个图像，然后它们将再次循环返回(image3将获得第一个位置值，并将image4获得第二个位置值。)

例子

最后列出的背景图像位于堆栈底部，而每个先前的图像堆栈均位于代码后的背景图像的顶部：

.box {
  background-image url(star.png), url(big-star.png);
}

div class=wrapper
  div class=boxdiv
div

.box {
  background-imageurl(big-star.png), url(star.png);
}

---

MDN参考