<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 ...
随机推荐
- 浅谈python的第三方库——numpy（终）
本文作为numpy系列的总结篇,继续介绍numpy中常见的使用小贴士 1 手动转换矩阵规格 转换矩阵规格,就是在保持原矩阵的元素数量和内容不变的情况下,改变原矩阵的行列数目.比如,在得到一个5x4的矩 ...
- centos7查看启动的进程并杀死
https://www.cnblogs.com/aipiaoborensheng/p/7676364.html ps -a -H kill -9 pid
- Interger对象不要用==进行比较
为了更好的空间和时间性能,Integer会缓存频繁使用的数值,数值范围为-128到127,在此范围内直接返回缓存值. IntegerCache.low 是-128,IntegerCache.high是
- Java自学-Lambda 方法引用
Lambda 方法引用 步骤 1 : 引用静态方法 首先为TestLambda添加一个静态方法: public static boolean testHero(Hero h) { return h.h ...
- 前向传播和反向传播实战（Tensor）
前面在mnist中使用了三个非线性层来增加模型复杂度,并通过最小化损失函数来更新参数,下面实用最底层的方式即张量进行前向传播(暂不采用层的概念). 主要注意点如下: · 进行梯度运算时,tensorf ...
- ECMAScript基本对象——Math数学对象
1.创建 不用创建直接使用.直接Math.方法名(): 2.方法 ①random():返回0.0-1.0的随机数,左闭有开 区间有开区间和闭区间,其中又分为全开区间( ),全闭区间[ ],左开右闭区间 ...
- gulp常用插件之gulp-rev-outdated使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-outdated这是一款旧的静态资产修订文件过滤器. 我们可以使用gulp rev来缓存一些资产.源文件的每次修改都会导致新的修 ...
- springMVC项目配置文件
一.springMVC项目配置文件 1.web.xml文件全局配置 <servlet> <servlet-name> dispatcher </servlet-name& ...
- xampp安装配置比较容易卡住的地方
xampp作为一款集成建站软件,方便了不少初学的开发者,但是虽然是集成和傻瓜式的安装,还是会遇到一些容易卡壳的地方,这里记录自己觉得一些比较重要的东西. 1.端口问题 如图是我改之后的端口,原来端口为 ...
- Time series data mining
from here 论文Timeseries data mining(2012)中提出:时间序列数据挖掘包括7个基本任务和3个基础问题: 7 tasks: query by content clust ...