css 中在图片中加入文字的方法
父div 相对定位
子 div 绝对定位(文字的话span标签即可)
子div 可以是多个,实现div同位置叠加
<div class='a'> <div class='b'></div> <div class='c'> <span>文字</span> </div> <div class='d'></div> </div>
.a{ width:400px; height:400px; position:relative; } .b{ width: 100%; height:100%; background:orange; } .c span{ display: block; padding-top: 40%; text-align: center; z-index: 5; position: absolute; top:0px; left: 0px; width: 100%; color: #fff; } .d{ position: absolute; top:0px; left: 0px; width: 100%; height: 100%; background:black; opacity: 0.5; z-index: 3; }