首页 > 代码库 > CSS之图片压盖效果案例分析
CSS之图片压盖效果案例分析
CSS之图片压盖效果案例分析
最近在做某个网站的静态页面,发现有很多图片压盖效果的布局,特来记录一下布局技巧。
碰到这种布局你会怎么做:
第一反应肯定是浮动,没错,可以把这几个图片放在ul列表的li标签里,给每个li标签内添加img和文字。如:
<ul>
<li> <img src="" alt=""><p>文字</p></li>
<li><img src="" alt=""><p>文字</p></li>
<li><img src="" alt=""><p>文字</p></li>
</ul>
然后再使用绝对定位,相对定位让压盖调到合适位置。
这不是重点,重点是怎么让压盖层上的文字垂直居中,也许一行文字垂直居中很easy,但是两行,多行呢。
很简单,给文字下的压盖层设置display:table;
再给文字设置display:table-cell;
和vertical-align:middle;
就可以了。
这是因为vertical-align属性不在表单元素里无法使用。
所以要把盒子变成表单元素。
我这里只演示两个盒子的做法,代码如下:
* {
margin:0;
padding:0;
font-family:"Microsoft Yahei";
color:#fff;
}
.box {
position:relative;
float:left;
width: 200px;
height: 200px;
margin-right:20px;
}
.mask {
position: absolute;
display: table;
left:0;
bottom:0;
width: 176px;
height: 44px;
padding:10px 12px;
background: rgba(0,0,0,.5);
}
.mask p {
display:table-cell;
vertical-align: middle;
}
<div class="box">
<img src="images/hot1.jpg" alt="">
<div class="mask">
<p>葫芦庙为什么会失火?</p>
</div>
</div>
<div class="box">
<img src="images/hot2.jpg" alt="">
<div class="mask">
<p>孙悟空的金箍棒有何特别之处?</p>
</div>
</div>
点击这里看demo:https://cyanar.github.io/relative-absolute/%E5%8E%8B%E7%9B%96%E5%9B%BE%E7%89%87%E6%96%87%E5%AD%97%E5%B1%85%E4%B8%ADdemo.html
CSS之图片压盖效果案例分析
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。