<img src = "..."/>的一个图片上面怎么在放上字
转自：https://zhidao.baidu.com/question/1495805873400412779.html
例子1：
html中可以用css相对定位让文字在图片的上面。
1、新建html文档，在body标签中添加一个div标签，然后在div标签中添加img标签和p标签，这时文字和图片是分开的：
2、分别为div标签和p标签添加“position: relative;”和“position: absolute;”，这时p标签和div标签就形成了相对关系：
3、为p标签设置“top”和“left”属性，属性值为距离顶部和左侧的长度，这时文字就会显示在图片的上面：
例子2：
文字在图片上方的 效果图
参考代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*div1下面 包含着1个图片和1段文字*/
#div1{
position: relative;/*相对定位*/
width: 267px;
height: 140px;
}
/*图片部分的设置*/
#img1{
/*position: static;默认定位,可以省略*/
width: %;
height: %;
}
/*文字的设置*/
#span1{
position: absolute;/*绝对定位*/
width: %;
bottom: 0px;/*离底下0像素*/
left: 0px;/*离左边0像素*/
text-align: center;
font-size: 18px;
color: white;
}
</style>
</head>
<body>
<div id="div1">
<span id="span1">惬意的海岸,旖旎的风景</span>
<img src="img/hbfj.jpg" id="img1" />
</div>
</body>
</html>
<img src = "..."/>的一个图片上面怎么在放上字的更多相关文章
- img src 使用 base64 图片数据
img src 使用 base64 图片数据 在网页上显示一张图片通常是 <img src="xxx.png" > 或 <img src="www.ur ...
- 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...
- 做了一个图片等比缩放的js
做了一个图片等比缩放的js 芋头 发布在view:8447 今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里 ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
- VUE2.0+VUE-Router做一个图片上传预览的组件
之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的 ...
- 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...
- javascript：查看一个图片是否加载完成
查看一个图片是否加载完成:<img id="img1" src="http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg" ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- 网页中通过js修改img的src属性刷新图片时，图片缓存问题现象表述及问题解决【ps：引用大神案例http://blog.csdn.net/goodleiwei/article/details/50737548】
问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过fir ...
随机推荐
- Freefilesync-文件夹自动同步
在企业的相关设置中,若两台物理机,主副之间需要做到文件同步,可以推荐使用Freefilesync作为自动同步设置 话不多说,直接搞机 开始设置好文件比对-点击红色漏斗设置(比较/同步) 点击确定 手动 ...
- CSP-J2019被虐记
-------------------------------------- (我菜到连背包都不会) ------------------------------------- 回首一想,今年的pj还 ...
- java文件分割及合并
分割设置好分割数量,根据源文件大小来把数据散到子文件中代码如下; package word; import java.io.File; import java.io.FileInputStream; ...
- 剑指offer-面试题23-链表中环的入口节点-双指针
/* 题目: 如果链表中包含环,如何找出环的入口? */ /* 思路: 双指针: 1.判断是否有环. fast指针一次2步,slow指针一次1步,当fast与slow相遇时,说明有环. 2.判断环路中 ...
- JavaDay10(下)
生产者消费者问题 问题描述 有两个进程:一组生产者进程和一组消费者进程共享一个初始为空.固定大小为n的缓存(缓冲区).生产者的工作是制造一段数据,只有缓冲区没满时,生产者才能把消息放入到缓冲区,否则必 ...
- gitlab 备份和恢复
前言 gitlab这个代码托管工具真是强大,很多东西都是做好了直接用的. 这里就包括备份和恢复功能. 正文 备份 我们可以直接运行此命令,来进行备份. sudo gitlab-rake gitlab: ...
- Codeforces 1304E. 1-Trees and Queries 代码（LCA 树上两点距离判奇偶）
https://codeforces.com/contest/1304/problem/E #include<bits/stdc++.h> using namespace std; typ ...
- Python论做游戏外挂，Python输过谁？
玩过电脑游戏的同学对于外挂肯定不陌生,但是你在用外挂的时候有没有想过如何做一个外挂呢? 我打开了4399小游戏网,点开了一个不知名的游戏,唔,做寿司的,有材料在一边,客人过来后说出他们的要求,你按照菜 ...
- 题解【洛谷P2679】[NOIP2015]子串
题面 看到求方案数,还要对 \(1000000007\ (1e9+7)\) 取模,一般这样的问题都要考虑 动态规划. 我们设 \(dp_{i,j,k,0/1}\) 表示 \(A_{1\dots i}\ ...
- 在IIS中配置申请的SSL证书
第一步,右键服务器证书=>打开功能 第二步,右侧选择导入,将申请到的证书按窗体内容导入即可 第三步,右键需要加载证书的网站,选择编辑绑定=>类型选择https=>选择刚才导入的数字证 ...