三层效果：img+background+文字居中显示

三层效果：img+background+文字居中显示
①布局：

②先使container-fluid、row、col-md-4的padding-left和padding-right为0
③设置img的max-width：100% height:auto，这样img会撑开col-md-4的容器
④设置col-md-4的background，但是这样是看不到的，只有在img中加opacity为0才能看到。
⑤现在剩下的就是文字居中显示了，
首先加position：absolute，会看到文字在图片的下方
再设置width：100% ，height：100%,会得到跟图片同等大小的区域
之后设置bottom：0，这样会和img区域重叠在一起
最后居中显示：就需要用到flex布局了（绝对定位也可以）
Display：flex
justify-content: center;
align-items: center;
flex-direction: column;
效果如下：

⑥现在剩下hover的效果：
背景出现+字体出现+隐约可以看到img
思路：hover的时候img加opacity:0.2，这样就可以看到img和背景，字体加opacity:1,(hover之前是0)
Css如下：

⑦具体的css代