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

日期:2021-01-20 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

原先只搞清楚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;}

实际效果: