通过CSS+DIV怎么将文字写在图片上方

2020-05-07 母婴育儿 84阅读

HTML图片和文字是并列显示的。如下:

1. 将文字浮在图片上

我们加个div把图片和文字包在一起,并且加上img-group和img-tip这两个class,便于后面的处理。

我们要让文字浮在图片上面,需要加上定位。看文字浮在了图片的底部。

display: inline-block;与定位无关,只是使整个.img-group长宽与图片适应。

2. 文字与背景处理

文字左对齐,我们把文字居中。给.img-tip添加如下代码:

文字不清楚,我们加上背景和字体颜色,并适当的设置一下透明。给.img-tip添加如下代码:

3. 鼠标悬浮特效

现在静态效果已经完成了,接下来,加一下鼠标悬浮出现文本的效果,现在.img-tip添加如下代码,让文本默认隐藏:

再加上鼠标悬停在图片上,显示文本的代码:

代码总汇

HTML

 
我是雪豹

CSS

.img-group {  position: relative;  display: inline-block;
}        
.img-tip {  position: absolute;  bottom: 0;  background: #333;  color: #fff;  opacity: 0.6;  display: none;
}        
.img-group:hover .img-tip {  display: block;  width: 100%;  text-align: center;
}

声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com