css：图文效果（上面图片下面文字）

效果

代码

<div class="content-account"><div><i></i><p>学习计划</p></div><div><i></i><p>我的练习</p></div>
</div>

.content-account {display: flex;& > div {display: flex;flex-direction: column;align-items: center;width: 1.2rem;height: 0.95rem;margin-right: 0.8rem;position: relative;p {font-size: 0.3rem;color: #666666;position: absolute;bottom: 0;}}// 学习计划& > div:nth-of-type(1) {i {width: 0.48rem;height: 0.48rem;background: url("../assets/logo-plan.png") no-repeat;background-size: 100% auto;}}// 我的练习& > div:nth-of-type(2) {i {width: 0.38rem;height: 0.38rem;background: url("../assets/logo-practice.png") no-repeat;background-size: 100% auto;}}
}

css：图文效果（上面图片下面文字）相关推荐

html文本框背景text怎么变透明,css怎么设置背景图片透明文字不透明？
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果.下面我们来看一下这两种方法的使用. CSS实现背景图片透明,文字不透明效果的两种方法: 方法一(半透明效果) ...
详情页点击其中图片转换成幻灯片图文模式，图片对应文字。
例如原本的详情页是这样的图文列表: 点击其中图片后要实现下列的效果: 不仅要在点击事件中定位到每张图片,还要把这个图片下的与其相关的介绍进行传值,并且显示出来.传递的数据有,所有图片地址,当前点击的图 ...
css背景上能添加文字,如何利用div+css来给背景图片上文字布局
这段时间设计了一个专题页面,上传到网站上去,打开这个网页一看,问题来了,这网页只是一个图片,没有文字,在后台添加的时候才知道只能在图片的下面显示文字. 我想到了可以将图片设为背景,然后在上面添加问题, ...
php图片中不显示文字内容,水印效果只有图片，文字不显示
在单位电脑上运行没有错,但是在家运行发现文字没有显示,只有图片. 回复讨论(解决方案) imagettftext($im,100,0, 600, 340,$textcolor,$fnt,$motto) ...
CSS 之控制图片与文字对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...
图片和文字对齐的方法
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 方法一. 设置各对象的vertical-align属性,属性说明: base ...
CSS实现背景图片透明文字不透明效果的两种方法
网页设计中经常要在背景图上放一些文字介绍,这就需要背景图片能有透明效果以便突出显示文字信息,经多方查阅,终于找到了2种有趣的方法. 1.在文字层添加rgba样式实现半透明效果方法: 背景图片层添加样 ...
[css] 怎么让div中的图片和文字同时上下居中？
[css] 怎么让div中的图片和文字同时上下居中? <div><img src="./"/><label>文字内容</label> ...
html如何让图片跟字体重叠,CSS设置图片与文字的间距
[实例介绍] CSS设置图片与文字的间距希望图片本身与文字有一定的距离只需要给标记添加margin属性即可.margin属性包括margin．top.margin-right,margin-bott ...
html图片隐藏文字,怎样用CSS隐藏图片背景的文字内容
这次的案列是怎样用CSS隐藏图片背景的文字内容,我们先使用使用background背景是将图片设为背景显示:然后使用text-indent缩进是隐藏a链接内容和链接标签是对文字设置锚文本链接.下面就是 ...

css：图文效果（上面图片下面文字）

效果

代码

css：图文效果（上面图片下面文字）相关推荐

最新文章

热门文章