CSS的position特性在DIV层中的运用

日期:2021-03-09 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

原先只搞清楚position:relative是相对性精准定位,position:absolute 是肯定精准定位;

常常看到照片轮播的正下方有个半全透明情况的文本叙述。我如今要做这样1个实际效果,由于并不是轮播,因此没去找软件,想自身写。

半全透明情况能够设定特性background: rgba(0, 0, 0, 0.15);

精准定位的话,父DIV设定position:relative后,子DIV的position:absolute就会相对性父DIV作肯定精准定位。这样就很便捷了。

拷贝编码
编码以下:

.banner{margin:20px;height:204px;position:relative;overflow:hidden}
.banner .content{color:#FFF;font-size:24px;line-height:30px;font-weight:800;background: rgba(0, 0, 0, 0.15);position:absolute;left:0;right:0;bottom:0;}

实际效果:
上一篇:郑州市公司百度关键词提升的流程 返回下一篇:没有了