background: url(1.jpg) no-repeat center / 100%;

background 是以下属性的缩写，background-size属性值只能写在background-position属性值的后面，并且使用斜杠分隔。

值

描述

background-color

规定要使用的背景颜色。

background-position

规定背景图像的位置。 详见 《background-position详解》

background-size

规定背景图片的尺寸。

background-repeat

规定如何重复背景图像。默认repeat , 常用 no-repeat ,新增了space和round（兼容性不好）

background-origin

规定背景图片的定位区域。

background-clip

规定背景的绘制区域。

background-attachment

规定背景图像是否固定或者随着页面的其余部分滚动。 scroll（滚动）、fixed（固定，不会随滚动条滚动）

background-image

规定要使用的背景图像

背景图片/渐变 background-image

背景图片

/* url 函数里的图片路径无需引号 */
background-image: url(./ecLogo.jpg);
  • 【实战】背景图片自适应全屏
  • 【实战】响应式巨幅背景大标题

背景渐变


背景定位 background-position

初始值为0% 0%，其等同于left top。

属性值为1个值时

另一个值为center

属性值为2个值时

  • 若2个值都是关键字属性值。left关键字和right关键字表示水平方向，top关键字和bottom关键字表示垂直方向，不能包含对立的方位，left right和top bottom这样的语法是无效的。
  • 若1个值是关键字属性值，另外一个值是数值或百分比值。如果数值或百分比值是第一个值，则表示水平方向，另外一个关键字属性值就表示垂直方向。如果数值或百分比值是第二个值，则表示垂直方向，另外一个关键字属性值就表示水平方向。因此属性值20px left是非法的，因为20px是数值且是第一个值，此时第二个值应该表示垂直方向，但是left显然是水平方向关键字属性值，出现了对立方位，所以为无效语法。
  • 若2个值都是数值或百分比值。第一个值表示水平方向，第二个值表示垂直方向。因此20px 20%表示在距离默认定位原点（左上角）水平方向20px、垂直方向20%的位置开始定位。

属性值为3个值时

第1个值必须是方向关键字，如left 10px top 或 left top 15px ，其中的数值部分表示偏移量，无数值的即0px

属性值为4个值时

格式为：方向关键字 偏移量 方向关键字 偏移量 ，如 left 10px top 15px

背景尺寸 background-size

  • 必须写在 background-image 后面
  • 必须写在 background-position 后面
  • 不能为负值
/* 宽、高的具体数值 */
background-size: 500px 500px;
/* 宽高相同时，可以简写为一个 background-size: 500px; */

/* 宽高的百分比（百分比值是相对于元素的背景定位区域计算的） */
background-size: 50% 50%; 
/* 如果两个属性值相同，可以简写成：background-size: 50%;  */

background-size: 100% auto; 

/* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
background-size: cover;

/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。  */
background-size: contain;

宽高都为auto的渲染规则

（1）如果图像水平和垂直方向同时具有内在尺寸，则按照图像原始大小进行渲染。

（2）如果图像没有内在尺寸，也没有内在比例，则按照背景定位区域的大小进行渲染，等同于设置属性值为100%。

（3）如果图像没有内在尺寸，但具有内在比例，则渲染效果等同于设置属性值为contain。

（4）如果图像只有一个方向有内在尺寸，但又具有内在比例，则图像会拉伸到该内在尺寸的大小，同时宽高比符合内在比例。

（5）如果图像只有一个方向有内在尺寸而没有内在比例，则图像有内在尺寸的一侧会拉伸到该内在尺寸大小，没有设置内在尺寸的一侧会拉伸到背景定位区域大小。

宽高仅一个为auto的渲染规则

（1）如果图像有内在比例，则图像会拉伸到指定的尺寸，高宽依然保持原始的比例。

（2）如果图像没有内在比例，则图像会拉伸到指定的尺寸。同时，如果图像有内在尺寸，则auto的计算尺寸就是图像的尺寸；如果图像没有内在尺寸，则auto的计算尺寸就是背景定位区域的尺寸。

背景原点 background-origin

用于改变背景图像定位的范围，也就是定位的原点，可以决定背景定位区域，默认值是padding-box。

/* 从内边距开始显示背景图 */
background-origin: padding-box;   //默认值

/* 从边框开始显示背景图  */
background-origin: border-box;

/* 从内容区域开始显示背景图  */
background-origin: content-box;

背景裁剪 background-clip

用于控制背景的显示范围

background-clip: border-box;  /* 默认值 - 以border-box为界限，对背景进行裁剪  */
background-clip: padding-box; /* 以padding-box为界限，对背景进行裁剪  */
background-clip: content-box; /* 以content-box为界限，对背景进行裁剪  */
background-clip: text; /* 让背景按照字符形状进行剪裁，可以实现文字纹理和文字渐变效果 */
<p class="text-gradient">我是渐变文字</p>
.text-gradient {
    font-size: 5rem;
    color: deepskyblue;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .text-gradient {
        background: linear-gradient(deepskyblue, deeppink);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}