在 CSS 中,我们可以通过在图片上添加文字来增强图片的视觉效果和信息传达效果。本文将介绍几种方法来实现在图片上添加文字的效果。一、使用伪元素 + 普通 icon 字体实现图标加文字这种方法比较简单,
.icon-text { display: inline-block; position: relative; font-size: 0; vertical-align: middle; } .icon-text:before { content: "\e600"; font-family: 'icomoon'; font-size: 16px; color: #ccc; display: inline-block; vertical-align: middle; margin-right: 10px; } .icon-text p { display: inline-block; font-size: 14px; color: #333; vertical-align: middle; }
.bg-icon { display: inline-block; background: url('icon.png') no-repeat center; background-size: contain; padding: 40px; color: #333; font-size: 14px; }
.data-icon { display: block; position: relative; width: 160px; height: 160px; } .data-icon:hover:after { content: attr(data-title); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; line-height: 160px; font-size: 14px; }
粉丝
0
关注
0
收藏
0