<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 ...
随机推荐
- qt 带箭头的直线 （类似viso）
2020.02.27 本来上传到CSDN,后来想想,我要放弃csdn了.csdn已经跟我分享的精神背道而驰了.想要代码,留邮箱吧. 近来Qt开发时可能遇到这样的需求:两个(或多个)矩形,要用直线将它们 ...
- Web_0005：阿里云服务器OSS权限的配置开通
创建用户 1,创建子用户 2,点击新建用户 3,设置账号类型,可以同时选 设置权限 1,设置对阿里云模块的控制权限,如 oss ecs 等的访问控制权限 2,点击所需的权限 3,获取账号的Acess ...
- Mac下安装MySQL8的问题
黑苹果用了一段时间之后,发现很多方面用起来比Windows还舒服些,没什么具体指标,就是纯粹一种感觉. 所以,慢慢将很多程序都迁移过来,在迁移过程中发现的一些有意思的事儿,我都把他们记录下来.如果,不 ...
- beego控制器介绍
控制器介绍 提示:在 v1.6 中,此文档所涉及的 API 有重大变更,this.ServeJson() 更改为 this.ServeJSON(),this.TplNames 更改为 this.Tpl ...
- springboot的yml配置文件里有多个参数的调用方式
本篇教程适用于配置文件一级下有多个二级或三级时,如何在service层不用通过多个@Value就能获取配置文件的参数 例如yml配置是这样的: 如果service层要引用这些参数,用多个@Value( ...
- Docker常用命令和功能介绍
可以搜索 dockerfile 定制创建一个redis镜像image 表示镜像docker search 搜索镜像的名称和标签docker 所在目录/var/lib/dockerdocker的镜像文件 ...
- ubuntu安装pyenv
安装依赖包 bash {.line-numbers} sudo apt-get update sudo apt-get install build-essential python-dev pytho ...
- laravel本地化扩展包的下载使用
1.下载扩展包 composer require caouecs/laravel-lang:~3.0 2.下载完成之后在根目录下的vendor中caouces\src下就是语言的扩展包 2.1我们复制 ...
- 如何成为一名AI工程师
如何成为一名AI工程师 step 前端:js,html,找准方向开始累积知识! 计算机/数学专业 python anaconda IDE pycharm/jupyter 熟悉基础语法,了解数据结构 刷 ...
- Bootstrap 警告框（Alert）插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...