【CSS】从一个CSS属性开始说起

前言

作为一名前端开发者，想必你也经常使用CSS background 属性，那你知道这个属性是哪些属性的简写吗？知道 background-color 背景颜色永远是最低？知道 background 属性设置值有什么注意事项吗？

带着上面的问题，我们一起揭开 background 神秘的面纱~

Background知多少

background 是一个 CSS 简写属性，用于设置与背景有关的内容。例如：图片，颜色、尺寸等。

它是多个 CSS 属性的集合：

• background-color: 设置背景颜色
• background-image: 设置背景图片，可以指定一个或多个背景图片
• background-position: 为每个背景图片设置初始位置
• background-repeat: 定义背景图片的重复方式
• background-size: 背景图片的大小
• background-attchment: 设置背景图片是随着页面滚动还是固定
• background-origin: 指定原点位置的相对区域
• background-clip: 设置背景图片的延伸方式

通常情况下属性顺序：

background: bg-color bg-image bg-position / bg-size bg-repeat bg-attchment bg-origin bg-clip

上面的顺序不是固定，有几点需要注意的地方：

• background 可以指定多层背景，每层用逗号分隔，前面层会覆盖后面的层。
• 每一层中 bg-position/size/repeat/image/attachment 等属性，可以出现 0 次或 1 次。
• bg-size 必须紧跟 position 后面出现，并且用 / 分隔，例如：to/40%。
• bg-color 只能包裹在最外层，因为只设置一种背景颜色。

好了，今天的 background 学完了，那我正式开始吧~

background-color的那些事

作为前端er，设置背景颜色手到擒来、家常便饭。在背景层级中永远是最低层，图片是覆盖在背景上的，其默认 transparent。

设置颜色可以使用16进制颜色值、RGB、RGBA、HSL、HSLA等。

背景颜色的透明度

对初学者来说，首先想到的是使用 opacity 指定透明度。但是这种方法，设置背景透明度的同时文本也会有透明度。正确的设置方法：rgba() 或 hsla()。

.opacity {
  background-color: red;
  opacity: 0.5;
}
.rgba {
  background-color: rgba(255, 0, 0, 0.5);
}
.hsla {
  background-color: hsla(0, 100%, 50%, 0.5);
}

hsla(色相、饱和度、亮度、透明度)

效果如下图，注意使用 opacity 不仅背景颜色有透明度，文字也有透明度。

关于背景颜色渐变的误区？

设置背景渐变色，通常使用 linear-gradient() 函数。该函数创建一个表示两种或多种颜色线性渐变的图片。函数的返回值是 image 类型，设置到 background 对应的是 bg-image 而不是 bg-color。关于 linear-gradient稍后学习。

background-image的那些事

通常可以设置一个或者多个图片。前面也提到渐变色函数 linear-gradient是图片类型，可以设置为背景图片。

渐变色背景图片 linear-gradient

linear-gradient 函数用于创建两种或多种颜色线性渐变的图片，语法比较复杂具体参考MDN文档，我们可以简单记忆为linear-gradient(angle/to 起始点位置，颜色列表)。

使用该函数需要的注意的是角度坐标系统问题。看下面的测验，background-image: linear-gradient(45deg, red, yellow); 对应下面哪个项？

正确答案是 ：B

为什么会这样的呢？如果你了解 linear-gradient 的角坐标就知道。

45deg时渐变的方向是从左下到右上变化。

参考：深入理解CSS3 gradient斜向线性渐变

渐变色的妙用

实现切角效果，例如：

/*第一个*/
.box_one {
  background: linear-gradient(-45deg, transparent 15px, #58a 0); 
}
/*第二个*/
.box_two {
  background: linear-gradient(-45deg, transparent 15px, #58a 0) right, /*right: 设置position*/
    linear-gradient(45deg, transparent 15px, #58a 0) left;
  background-size: 50% 100%;
  background-repeat: no-repeat; /*避免重复*/
}
/*四个角*/
.box_four {
  background: 
    linear-gradient(135deg, transparent 15px, #58a 0) top left, 
    linear-gradient(-135deg, transparent 15px, #58a 0) top right, 
    linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, /*right: 设置position*/
    linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat; /*避免重复*/
}

元素隐藏background-image加不加载？

经过测试，当元素设置了 bg-image并且 display 为 none 时，Chrome浏览器并没有获取网络图片，点击屏幕 display 不为 none 获取图片。（PS：其他浏览器没有测试~）

background-image支持CSS animation/transition效果

下面的效果图

 .image {
    width: 300px;
    height: 400px;
    background-image: url('img/1.png');
    background-repeat: no-repeat;
    background-size: contain;
    transition: 1s ease-in-out background-image; // 背景过渡 1s
  }
  .image:hover {
    background-image: url('img/2.png');
  }

无论是静态图片、位图、还是外链图都支持 CSS 动画/过渡效果，唯独CSS渐变不支持。

可以参考张鑫旭老师的文章《颠覆，原来background-image也是支持CSS动画的》

background-position的那些事

bg-position 支持1~4个值，可以是具体的数值、也可以是百分比，还可以是 left / right / top / center / bottom 等关键字。

一图胜千言，借用 张鑫旭老师《CSS 世界》的一张图：

• 如果缺失偏移关键字，则认为是 center。例如：bg-position:right 等同于 bg-position:right center 。

是不是很简单呢？有没有思考过这个问题，使用 bg-position:right 10px bottom 10px 这个距离是相对谁的呢？ 是盒模型中的 Border Box、Padding Box 还是 Content Box？

答案是：默认情况下，bg-position是以 padding box 为准的。top left 指的是padding box 的左上角。

background-origin 可以修改 background-position 默认的基准。可以通过设置 padding 和 bg-origin 为 content-box 实现 right 10px bottom 10px 的效果。

参考张鑫旭老师博文《CSS 值简介理解background百分比定位》

background-size的那些事

开始前思考一个问题？说说 contain 与 cover的区别吗？

background-size: 用来给背景图片设置尺寸，默认 auto。可以修改图片的大小、比例和拉伸等。可取值如下：

• contain: 缩放图片完全装入背景区
• cover：缩放图片以完全覆盖背景区
• auto: 按比例缩放背景图片
• 百分比：相对背景区的百分比
• 数值：指定大小，不能为负值

效果如下图：

• auto: 默认按照图片的尺寸填充容器。
• contain ：缩放长边可以完全显示在容器中。
• cover: 短边完成在容器中，完全填充容器。

background-clip 那些事

bg-origin 控制背景图片的延伸范围。看一张效果图：

• border-box: 图片延伸到边框的下面，content-box 不包含内间距。
• 默认情况下，背景是延伸到border的下面的。

如何实现半透明边框

默认情况下，背景是延伸到 border 下面，要实现半透明边框需要调整背景延伸。

.box {
  width: 100px;
  height: 80px;
  background-color: white;
  border: 10px solid hsla(0, 0%, 100%, .5);
  background-clip: padding-box;  /* 控制背景延伸 */
}

效果如下：

参考

• CSS - MDN
• 深入理解CSS3 gradient斜向线性渐变
• 《CSS 值简介理解background百分比定位》
• 颠覆，原来background-image也是支持CSS动画的
• CSS Background属性详解