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;
}