640X60广告位招租 qq245909083

添加DIV遮罩层,在DIV上展现提示信息

分享时间:2020-03-08 154 热度℃
半透明遮罩层下方的文字可见,但链接不可点击;
遮罩层位置和宽高受被遮罩的DIV影响,如稍有错位请自行调整下方的margin-left值;
用到CSS3属性,IE11以前的浏览器下可能稍有错位,请自行解决。

在需要遮罩的DIV内的末尾(即 </div> 前)添加以下代码(请将 subforum 替换为被遮罩DIV的ID):

<style>#subforum { position: relative; } .cover { position: absolute; width: calc(100% - 2px); height: calc(100% - 1px); margin-left:-9px; margin-bottom:1px; background: rgba(0,0,0,0.3); bottom: 0; } .cover span { position:absolute; font-size:24px; color:#ffffff; padding:5px 10px; background: rgba(255,215,0,0.8); left:50%; top:50%; transform: translate(-50%,-50%); }</style>
<div class="cover">
        <span>会员尊享更多信息  <a href="vip.html" style="background:#ffffff; color:#FFD700;">开通会员</a></span>
返回顶部