关于css背景的一点总结

background默认背景区域覆盖内容和内边距及边框,分别有以下属性:

1.background-clip(定义背景绘制区域)

  • border-box 背景覆盖边框最外面
  • padding-box 背景覆盖内边距的最外面
  • content 背景仅覆盖内容区域
  • text 最常用,把背景绘制在文本区域内,文本用背景填充,文本线条之外的背景为透明。
  • ps:1.此属性对根元素(如html中的body或html元素)

2.background-size(用于设定背景图片大小,IE9以下不支持)

  • cover 缩放背景完全覆盖背景区,由于切割,可能会导致背景图片一部分看不到
  • contain 将图像缩放为放在背景定位区域中的尺寸,装入背景区,可能部分区域空白不被背景覆盖。
  • length 
    • 可以放大可以缩小,可以使用像素值也可以使用em,并且不同单位可以混用
    • 如果允许允许背景重复,重复的图像与原图像等同大小。
  • percentage
    • 声明的百分比相对背景定位区域计算,即由background-origin定义的区域,而非background-clip计算
    • 长度值和百分值也可以混用
    • 不能设置负的长度值和百分数值
  • auto
    • 如果一个轴设置为auto,而另一轴不是,且图像含有固定宽高比,则该轴按照另一轴的宽高比计算
    • 如果出于一些原因,第一步失败,图像没有固定宽高比,则auto设置为相应轴的固定尺寸(宽对应宽高)
    • 如果前两部均失败,auto将解析为100%(相对于背景定位区域)

3.background-position(图像的具体位置,适用于块级元素和置换元素)

  • 如果只设置一个关键字,则另外一个方向居中。
  • 百分数值和长度值可以混用,还有方向也可混用
  • 可以使用负值,把原图向拉到元素的背景区域之外。

4.background-origin(计算源图像的位置以什么时候的边界为基准,定义的是背景定位区域)

  • border-box 源图像的左上角放在边框左上角。
  • padding-box 源图像的左上角放在边框内侧的左上角。
  • content-box  源图像的左上角放在内容区域的左上角。
  • ps:以上均为默认,可通过background-position来改变

5.background-repeat(背景是否重复)

  • repeat
  • no-repeat
  • round 会缩放图像,但是不覆盖background-position值,为了确保重复时不裁剪背景图,必须放在四个角之一位置。
  • space 确定沿某一轴能完全重复多少次,然后从背景区域的一遍到对边均匀排列图像(间距不等),可能会覆盖一个轴的position值,不影响另外一个。

6.background-image(背景图像)

  • url()
  • linear-gradient(#ddd,#fff)设置背景为渐变色。

7.background-attachment(背景图是否固定/滚动)

  • fixed背景图固定,不随文档滚动
  • loacl 与fixed 相反
  • scroll 背景图像随着文档滚动。

总结:background可以写为一个属性,但需要注意以下:

  1. background-size值必须紧紧跟随background-position之后,二者之间要以斜线隔开
  2. 值的规则依然适用,横向值在前,纵向值在后。
  3. 同时为background-origin和background-clip提供值,前者必须在前。如果只提供一个值,则同时设定。
  4. background为简写属性,所以默认值(未单独设置)会覆盖之前值。
原文地址:https://www.cnblogs.com/mernva/p/12336586.html