CSS线性渐变效果

1、未添加元素前

2、添加元素后

#实现方法，在父级盒子里面添加背景图片

  .box {

    position: relative;

    margin: 0 auto;

    z-index: index 2;

    width: 736px;

    height: 414px;

    background-image: url(./img/jhk-1723779352440.jpg);

  }

用单独的盒子放渐变效果，opacity: 0默认渐变效果无

  /* 添加线性渐变 */

  .boot {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-image: linear-gradient(transparent,

        rgba(0, 0, 0, 0.6));

    /*默认效果透明度为0  */

    opacity: 0;

    transition: all .6s;

  }

当鼠标滑过活点击父级盒子时触发渐变效果

  /* 当鼠标滑过父级显示渐变效果 */

  .box:hover .boot {

    opacity: 1;

  }