background:rgba(r,g,b,opacity)是设置为半透明的背景色,ie兼容性不是很好
一定程度上解决,节点里面的元素不透明,单单是背景色透明了
布局代码如下:
<div class="masked">
<img src="images/intel.web.368.207.1.jpg" alt="" class="img-responsive">
<div class="mask">
<h5>解密2合1电脑</h5>
<p>搭载英特尔处理器的2合1电脑,助你高效工作的同时带给你灵活可触控的平板体验。</p>
</div>
</div>
样式设置如下:
.masked {
position: relative;
}
.masked .mask {
position: absolute;
top: 80%;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.5);
transition: top .15s linear;
color: #ffffff;
}
.masked .mask:hover {
top: 0;
}