HTML、CSS知识点,面试开发都会需要--No.6 设置背景

No.6 设置背景

---

1.background

（1）如何设置背景：背景可通过color、image、gradient渐变或者组合方法设置。

（2）background-color：颜色格式可以是十六进制或者rgb以及rgba。为了保证兼容性，有些浏览器不支持rgba，需要在设置rgba之前添加一个十六进制设置。如下：

div {
  background-color: #b2b2b2;
  background-color: rgba(0, 0, 0, .3);
}

（3）background-image:通过添加背景图片来设置背景。例如：

div {
  background-image: url("alert.png");
}

（4）background-repeat：设置图片重复形式，包含的值有repeat, repeat-x, repeat-y, and no-repeat，repeat是默认值，表示水平和垂直都重复。

（5）background-position：把背景通过元素左上角的偏移位置定位背景显示位子。包含两个值，分别是水平和垂直的偏移值。下面的代表表示，元素的背景色从左上角开始向右偏移20个像素，向下偏移10个像素。

div {
  background-image: url("alert.png");
  background-position: 20px 10px;
  background-repeat: no-repeat;
}

下面的代码表示水平偏移20个像素，垂直为默认的50%。

div{
    background-position: 20px；
}

（6）background-position关键字参数：参数可为top、right、bottom、left、center关键字, pixels, percentages或者任意长度单位。关键字和百分比很相似，例如：left top(0, 0)、right top(100%, 0)、left bottom(0， 100%)、right bottom(100%, 100%)。

（7）background缩写：缩写的属性顺序为background-color background-image background-position background-repeat。下面代码表示背景色为#b2b2b2，背景图片为url("alert.png")，position为水平偏移20像素、垂直偏移10像素，重复属性值为no-repeat。

（8）多背景设置：多个背景图片设置通过“，”分隔，最前面的图片展示在最上面，最后的图片展示在最下边。如下代码所示：

div {
    background: url("foreground.png") 0 0 no-repeat, url("middle-ground.png") 0 0 no-repeat, url("background.png") 0 0 no-repeat;
}

2.线性渐变效果

（1）linear-gradient函数：默认从top到bottom渐变，可以添加多个颜色。如下代码：

div {
    background: #466368;
    background: -webkit-linear-gradient(#648880, #293f50);
    background: -moz-linear-gradient(#648880, #293f50);
    background: linear-gradient(#648880, #293f50);
}

（2）兼容性：有些浏览器不支持渐变效果，一般都需要在最前头添加一个单色的背景，例如上面代码添加的background: #466368。

（3）改变渐变方向：linear-gradient的第一个参数可改变方向，参数使用：to 方向。例如下面的代码让渐变从左上角渐变到右下角。

div {
    background: #466368;
    background: linear-gradient(to right bottom, #648880, #293f50);
}

（4）添加多个渐变颜色：linear-gradient方法可添加多个渐变颜色。参考代码如下：

linear-gradient(to right, #f6f1d3, #648880, #293f50);

（5）渐变占比：可以设置渐变颜色在整个渐变隧道的占比，例如下面代码的第二个颜色占比85%。

div{
    linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);
}

3.放射性渐变

（1）radial-gradient：radial-gradient提供了反射性渐变函数，参数可接收多个颜色。

（2）参数说明：第一个参数设置绝对中心位置的颜色，第二个参数设置最外层颜色，最终效果是从中心位置向外过度转换。

4.CSS3 背景新属性

background-size: 设置背景相对于元素的大小，包含width和height两个值，值可以是数字或者关键字。例如下面设置元素的背景宽度自适应，高度占元素高度的75%。

div{
    background-size: auto 75%;
}