CSS非布局样式：背景

背景

• background属性（其中包含了很多属性，这里具体补充 笔记CSS背景 中没有的渐变部分，其他参考笔记CSS背景）
• 多分辨率适配：图标需要适配移动端的时候可以将background-size调小，那么移动端上看到就会更加清晰。（大图调小一倍也就是“两倍图”/“高清屏”）

背景颜色

background属性值：

• 直接使用颜色名：red等
• 十六进制：#f9f9f5等
• **hsl(230 , 50%,50%)或hsla(230,50%,50%,.3)**：h：扇形角度。s：饱和度（%）。l:亮度（%）。a：透明度（小数，0透明，1全黑）
• rgb（255,255,255）或rgba（0,0,0,.3）:红、绿、蓝、透明度
• 背景图url(链接)

渐变色背景

• 可参考MDN
• CSS 渐变可以在任何使用 <image> 的地方使用,例如背景。
• **线性渐变linear-gradient()、径向渐变radial-gradient（）和圆锥渐变conic-gradient()**。
• 还可以使用 repeating-linear-gradient（） 和 repeating-radial-gradient（） 函数创建重复渐变，注意属性是background-image。

线性渐变linear-gradient()

线性渐变由 linear-gradient 函数创建)，至少指定两个颜色（色标），也可以指定任意数量：

.simple-linear {
  background: linear-gradient(blue, pink) no-repeat;
}

改变渐变中心点

• 默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。
• 你可以通过设置一个值来将渐变的中心点移动到指定位置。
• 在如下示例中, 我们**将渐变的中心点由50%设为10%**：

  .color-hint {
    background: linear-gradient(blue, 10%,  pink) no-repeat;
  }

  

改变渐变方向

• 默认情况下，线性渐变的方向是从上到下
• 你可以指定一个值来改变渐变的方向：

  .horizontal-linear {
    background: linear-gradient(to right,blue, pink) no-repeat;
  }

  

对角线渐变

• 你甚至可以设置渐变方向为从一个对角到另一个对角
• 比如左上角到右下角：

  .diagonal-gradient  {
    background: linear-gradient(to bottom right,blue, pink) no-repeat;
  }

  

设置渐变角度

• 如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度
• deg：degree 度
• 0deg 代表渐变方向为从下到上, 90deg 代表渐变方向为从左到右，诸如此类 正角度 都属于 顺时针 方向。 而 负角度 意味着 逆时针 方向。
  

  .angled-gradient {
    background: linear-gradient(90deg,blue, pink) no-repeat;
  }

  

使用多种颜色

想使用多少种颜色都可以，默认情况下，所设置颜色会均匀分布在渐变路径中。

.simple-linear {
  background: linear-gradient(90deg,blue, pink) no-repeat;
}

设置颜色终止位置

• 你不需要让你设置的颜色在默认位置终止。
• 你可以通过给每个颜色设置0，1%或者2%或者其他的 绝对数值 来调整它们的位置。
• 如果你将位置设置为百分数， 0% 表示起始点, 而100%表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。
• 如果有些位置你没有明确设置，那么它将会被自动计算，第一种颜色会在0%处停止，而最后一种颜色是100%，至于其他颜色则是在它邻近的两种颜色的中间停止。

例子：
一个有趣的例子，135deg:从左上角到右下角进行渐变。transparent：透明的。从0到49.5%是透明的，从49.5%到50.5%是绿色的，50.5%到100%继续回到绿色：

body {
    background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%) no-repeat;
}

background-size不仅可以设置背景图片的大小，也可以设置渐变的大小，此时可以加上它并让他在x轴上重复（注意：简写属性中background-size必须紧随在background-position后并以/字符分隔）：

body {
    background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%) repeat-x center/30px 30px;
}

此时还可以加上一个背景进行多背景叠加（两个属性值之间使用,分隔）：

body {
    background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%) repeat-x center/30px 30px,
    linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%) repeat-x center/30px 30px;;
}

我们还可以去掉x轴重复并给div一个高度然后形成一片网格：

#id {
    background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%) center/30px 30px,
    linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%) center/30px 30px;
            height: 100px;
}

---

repeating-linear-gradient（）重复渐变

• 注意：repeating-linear-gradient（）是background-image的属性值。
• CSS函数 repeating-linear-gradient（） 创建一个由重复线性渐变组成的<image>， 这是一个类似 linear-gradient 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器
• 每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

例子

#hi {
    height: 100px;
    background-image: repeating-linear-gradient(135deg, transparent 0,transparent 5px, green 5px, green 10px);
}

注意：如果绿色的宽度和透明的宽度不是倍数关系就会不均匀:

#id {
    height: 100px;
    background-image: repeating-linear-gradient(135deg, transparent 0,transparent 5px, green 5px, green 6px );
}

---

面试：如何使用背景来实现网格（或波浪形）

使用线性渐变

网格例子，135deg:从左上角到右下角进行渐变。transparent：透明的。从0到49.5%是透明的，从49.5%到50.5%是绿色的，50.5%到100%继续回到绿色：

body {
    background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%) no-repeat;
}

background-size不仅可以设置背景图片的大小，也可以设置渐变的大小，此时可以加上它并让他在x轴上重复（注意：简写属性中background-size必须紧随在background-position后并以/字符分隔）：

body {
    background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%) repeat-x center/30px 30px;
}

此时还可以加上一个背景进行多背景叠加（两个属性值之间使用,分隔）：

body {
    background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%) repeat-x center/30px 30px,
    linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%) repeat-x center/30px 30px;;
}

我们还可以去掉x轴重复并给div一个高度然后形成一片网格：

#id {
    background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%) center/30px 30px,
    linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%) center/30px 30px;
            height: 100px;
}

---

使用重复线性渐变

没办法做两个颜色间隔不同的效果（这个可以去上面看重复的倍数关系）

#hi {
    height: 100px;
    background-image: repeating-linear-gradient(135deg, transparent 0,transparent 5px, green 5px, green 10px);
}

注意：如果绿色的宽度和透明的宽度不是倍数关系就会不均匀（这个可以去上面看重复的倍数关系）:

#id {
    height: 100px;
    background-image: repeating-linear-gradient(135deg, transparent 0,transparent 5px, green 5px, green 6px );
}

---

多背景叠加

• 通过使用 CSS3，你可以向元素应用多个背景。这些背景相互堆叠，第一个背景放在最上面，最后一个背景放在最下面。 仅最后一个背景允许拥有背景色。
• 可以使用简写属性 background 来设置多个背景，也可以使用除 background-color 外的独立属性来设置多个背景。即下面的属性可以用属性列表来设置每一个背景： background，background-attachment，background-clip, background-image，background-origin，background-position， background-repeat， background-size。

  .myclass {
    background: background1, background 2, ..., backgroundN;
  }

---

雪碧图

• 雪碧图将多个图标放在一张图上加载，通过background-position定位来显示相对应的图片。所有小图标集中在一个图片上，这样就可以减少http请求，提高页面访问速度。
• 目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。

例子：
这是一张放了两个图标的图片：

两个图标其实是取自同一张图片的两个不同位置：

网页效果：

---

面试：CSS如何优化页面

• 使用雪碧图，将多个图标放在一张图上加载，通过background-position定位来显示相对应的图片。
• 所有小图标集中在一个图片上，这样就可以减少http请求，提高页面访问速度。

---

base64和性能优化

• base64一般用在少量的小图标上去减少HTTP请求。
• 普通的背景图中url()中是路径，而 base64 是一串文本。
• 注意：在真正的工程项目中不可能通过例子中的方法去使用base64，这样后面维护的人会不知道都是哪些图，写的时候还是正常url，后面打包时会通过别的方法进行转码到base64。

缺点：

1. 图片转成base64后，体积增大1/3(变为原来的4/3)，文件体积增大，本来图片是单独的文件，现在相当于将其放到了CSS文件中，这会导致CSS文件本身变得很大。
2. 增大解码的开销，如果拿到的是图片，那只需要解码显示；如果拿到的是base64，就需要先把他转化为一个图片数据，然后再做后面的操作，在移动端有明显影响。

优点：
节省HTTP请求。

例子：
我们可以使用在线工具将一张本地图片转为base64：

使用base64：

body{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAABbCAYAAABqIIlXAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAASySURBVHic7d09TyJrHIfh3xJFsgTUnKjJQkO2oDg2VvSUJDYWhoZiO1q/gIVfwHa7LWwMhY2JJb0VjY3FyTZgsmxOzGo4EXTlFMOwvMwAo45/dr2vCoIMmHD7vMwQ33W73a4AmIhYvwHgLSNAwBABAoYIEDBEgIAhAgQMESBgiAABQwQIGCJAwBABAoYIEDBEgIAhAgQMESBgiAABQwQIGCJAwBABAoYIEDBEgIAhAgQMLYT9ArvH9bBfAng1lWL6RY/HCAgYIkDAEAEChggQMESAgCECBAwRIGCIAAFDBAgYIkDAEAEChggQMESAgKHQvw3xdiS0v7Oszei9qsff9Dnw81d1WIwrddPS7tn10CPb+Q8qrUsXtSsdXPofoVxIK58M/MLDfF//54Tfq/e7q62jk+86feZbeEsIcF7kokpJavx7PfJAQlsrEanTVm1CfH0djwhyG6pkNOUPgxsRXhMBzonyX4tSp63qud9ItqRSMa2Sx3NbzR/6VL31OfKqDjOL0k1bjaykWSLGqyHAeZBdUy4ptZp3zsh1Vu+PVLNOP70ltL8TV0qSkksqbaVV2hr/qcbXuvbOn/H+8WQEOAe2U4uK615Vj1EsFQsw/RxRLixrMyrPdV1/zal7XRKfGQI0t6r8ekTST8/HsklJNw8BNzYGN4Q6yhbj+pJ/GJim/opv9g2jReWLaeUn/ozXNPmpm1JvAwG+uGkf1OEPZLnQmyL273us/5JxVYrxCa/5qIvalZru3dz74d3Y2oK+bC2rshPTUSOiUmZx7H1MR0hhIMAXF+CDml1TLvmoxo2U6kX3eWD958Q4+/HKH3s3zr9pd3Baefldn1Y2VMksqZSR904pTBCgmYT2/16Smj9UVUKlsV1Pd/rZecao4041Hc5mizM9daeKk3dQETYCNLOgVbV1Ur2V8onxh7MLWpHUunsIfOStQroX9L2qx3XtDT16q4MTNzgnxkpxWa1mS199jpeK+a1R8VwEaOZaeyfOrW2vh1ciikvSuhOIv/Epau2sroP+PXdDxrk3POKNxjjp/c6yCSOfHVf4IcB5NbqOG+GcH4yo1fxvyhR1MDJnXekE/Rjs3OLUdePwdBezIcDfkBufbloT1m+DI9+vUXJwk2c2Ca3HJN0FPRWCWRDgnCoX0srHvK/rdOObPNUbGPlyG6qMTh9nnSpmY8pEpUaDaWUYCHAuJdT4p66j1IfebmVvBMttqJJxrhk9CrLOGpvOupsv8am7oO5VOudcLRMKApxLtzq9lHR5pVP1ppzuCPYi5/CG14W+smvaWY+o1bzlBHxICDCA/tprotl2C4OcfzutOiE6J+aXtJNP6NTvuVH/b03M5M694ZynjHfaOuI8YWgIMAA3BCvOBsqqDovLqhQWvNdwTx4hR74PmHuvzeijLmpcMROmd91utxvmC/D/AfEn4f8DAn8QAgQMESBgiAABQwQIGCJAwBABAoYIEDBEgIAhAgQMESBgiAABQ6FfjA3AHyMgYIgAAUMECBgiQMAQAQKGCBAwRICAIQIEDBEgYIgAAUMECBgiQMAQAQKGCBAwRICAIQIEDBEgYIgAAUMECBgiQMAQAQKGCBAw9D9TZ5jL6D/UAwAAAABJRU5ErkJggg==);
}

---