HTML5、CSS3进阶——渐变背景

目标：使用background-image属性实现渐变背景效果

是多个颜色逐渐变换的视觉效果，一般用于设置盒子的背景

工作中一般已不采用这种方式；

background-image：linear-gradient（

颜色1

颜色2

）；

新方法：主流方法，设置一个盒子为不同透明度；

background-image：linear-gradient（

transparent,

rgb(0,0,0,.6)

）；

来实现从上到下透明到半透明的渐变

z-index实现权重定位的，使标签看不见的方法display：none/opcity:0;透明度设置为0。Visibilaty：hidden占位不脱标。一般情况都是将一个盒子设置为渐变效果之后再压在某div上面。，不会直接设置原div为渐变，这样处理hover的时候会方便许多。

综合案例（模拟华为新闻渐变效果）总结：

<i>标签，i是italic的缩写，表示斜体，italic指的是“意大利体（Italic Type）” 。 表示强调，唤起注意。通常用<i>标签来放iconfont图标。

实现步骤：设置版心，给定尺寸和水平居中等基本样式；添加三个同尺寸的盒子，盒子里面放各自的图片、文字、和一个渐变的同等大小的盒子。其中渐变盒子和文字使用定位，添加不同的权重使文字在渐变盒子出现的时候显示在最上面。默认情况下渐变盒子是隐藏的。实现效果：hover的时候显示出来，图片给放大效果，文字向上移动。