网页的背景颜色变化效果

---

前言

学习背景颜色的渐变和媒体查询是的背景颜色变化丰富网页的呈现效果。

---

一、背景线性渐变

• 呈现效果
  
• 语法

background: linear-gradient(起始方向，颜色1，颜色2，......);
background: -webkit-linear-gradient(left, red, blue);
background: -webkit-linear-gradient(top left, red, blue); 从左上角开始颜色渐变

注：背景渐变必须添加浏览器私有前缀。

二、媒体查询背景变色

1.实现思路

按照屏幕的当前像素大小，定义所呈现的背景颜色。

• 案例：
• 小于540px页面的背景颜色变为蓝色。
• 540~970px页面的背景颜色变为绿色。
• 大于等于970px页面的背景颜色变为红色。

2.具体语法

代码如下：

@media screen and(max-width: 539px){
     
   body{
     
   background-color: blue;
   }
}
@media screen and(min-width: 540px)and(max-width: 969px){
     
   body{
     
   background-color: green;
   }
}
@media screen and(min-width: 970px){
     
   body{
     
   background-color: red;
   }
}

注：max-width 不包括等于号而 min-width 包括等于号。

• 简化代码：

@media screen and(max-width: 539px){
     
   body{
     
   background-color: blue;
   }
}
@media screen and(min-width: 540px){
     
   body{
     
   background-color: green;
   }
}
@media screen and(min-width: 970px){
     
   body{
     
   background-color: red;
   }
}

注：此简化方法利用了CSS的腾叠性。

• 媒体查询从小到大的优势分析：

---

总结

学习了两个网页背景效果的运用，语法都比较简单。注意理解媒体查询中背景变化的运用。