在CSS中实现将文字显示在图片上非常简单。只需要利用CSS的position属性和z-index属性,就可以轻松实现。img { position: relative; } img::after {
在CSS中实现将文字显示在图片上非常简单。只需要利用CSS的position属性和z-index属性,就可以轻松实现。
img { position: relative; } img::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } p { position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); z-index: 2; color: white; font-size: 20px; text-align: center; }
以上代码中,我们给图片设置了相对定位,然后利用伪元素在图片上加了一个黑色半透明遮罩。接着,我们将需要显示在图片上的文字添加一个绝对定位,并使用transform属性使其居中对齐。最后,使用z-index属性,将文字放在遮罩层的上面。
粉丝
0
关注
0
收藏
0