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

 我来答
程序员养大闸蟹
推荐于2019-08-06 · 自家的蟹塘,苏州阳澄湖蓝标大闸蟹养殖户
程序员养大闸蟹
采纳数:2362 获赞数:20622

向TA提问 私信TA
展开全部

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

1. 将文字浮在图片上

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

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

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

2. 文字与背景处理

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

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

3. 鼠标悬浮特效

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

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

代码总汇

HTML

<div class="img-group">  <img src="img/snow.png">
<div class="img-tip">我是雪豹</div></div>

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;
}

博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员,对于Word文档生成PPT的操作,我们有以下建议:1. 使用另存为功能:在Word中编辑完文档后,点击文件->另存为,选择PowerPoint演示文稿(*.pptx)格式,即可将文档内容转换为PPT... 点击进入详情页
本回答由博思aippt提供
一骑当后
推荐于2017-10-11 · 知道合伙人数码行家
一骑当后
知道合伙人数码行家
采纳数:40298 获赞数:306435
网络、设备维护、电路、弱电检测。

向TA提问 私信TA
展开全部

  用CSS往图片上嵌入文字有二种方法,分别如下:

  第一种方法、添加一个DIV,采用绝对定位,图片所属DIV为基准。

  参考代码如下:

<div style="position:relative;width:100px;height:100px;">
    <img src="" alt="" />
    <div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">
        文字
    </div>
</div>

  第二种方法逗丛、图片作为背景罩指羡图片。

  参考代码如下:

<div style="background:url(abc.jpg) no-repeat left top;">
    wenzi
</div>物拍
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
boyhaxin
2011-12-14 · TA获得超过513个赞
知道大有可为答主
回答量:1570
采纳率:0%
帮助的人:1320万
展开全部
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档<消薯/title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 119px;
top: 14px;
}
-->
</style>
</head>

<body>
<div>此处显示新 Div 标签的内容
<div id="apDiv1">asdfasdf</亏型div>
</div>
</body>
</销桥猜html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
跳2支舞
2011-12-14 · TA获得超过168个赞
知道答主
回答量:107
采纳率:0%
帮助的人:75.7万
展开全部
将图片设置为背景,或者将文字层定位在图片上
追问
有具体代码可以供我参考吗?
追答
1.背景

文字文字文字

2.定位

文字文字文字

文字的位置可以根据实际调整。
为了方便说明将样式写在行内了,你可以根据需要放置在头部或样式表里
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
死亡冰剑
2011-12-14 · TA获得超过244个赞
知道小有建树答主
回答量:435
采纳率:66%
帮助的人:204万
展开全部
<p>dddd</p>
<img />
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(5)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式