转自：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 = "..."/>的一个图片上面怎么在放上字的更多相关文章

  1. img src 使用 base64 图片数据

    img src 使用 base64 图片数据 在网页上显示一张图片通常是 <img src="xxx.png" > 或 <img src="www.ur ...

  2. 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个

    自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...

  3. 做了一个图片等比缩放的js

    做了一个图片等比缩放的js 芋头 发布在view:8447   今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里 ...

  4. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  5. VUE2.0+VUE-Router做一个图片上传预览的组件

    之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的 ...

  6. 点击图片或者鼠标放上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 ...

  7. javascript：查看一个图片是否加载完成

    查看一个图片是否加载完成:<img id="img1" src="http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg" ...

  8. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  9. 网页中通过js修改img的src属性刷新图片时，图片缓存问题现象表述及问题解决【ps：引用大神案例http://blog.csdn.net/goodleiwei/article/details/50737548】

    问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过fir ...

随机推荐

  1. Vue组件库读取自定义配置文件

    有这样一个场景,在组件库中新增一个配置文件,后续只修改一下配置文件中的配置项就可以实现不同的需求,下面就让我们I一起来实现吧. (一)在在项目的根目录(package.json所在目录)中创建一个vu ...

  2. .net 父类值赋给子类

    1.最简单的方式,反射+泛型 优点:字段修改时,无需更改代码,只需要更新实体即可 缺点:因为用到反射,可能效率会稍微弱那么一点点,没有实际用太多字段测试 public static cClass Pa ...

  3. IO流学习之综合运用（文件复制）

    通过File.字节流.字节流缓冲区实现文件复制 需求: 1.用File类读取指定文件File下的所有文件(包括Copy文件夹内的所有文件) 2.将所有文件复制到指定文件FileCopy夹下 需求分析: ...

  4. demo Django-基础书籍添加删除（单表）

    小demo使用---- 1.pycharm-2019.2 2.python-3.7.2 3.mysql-5.7.25 4.django-2.2.4 使用过程中的一些注意事项和出现的常见错误的解决地址 ...

  5. APC BK650 RJ50-USB数据线引脚定义

    WHY 群晖NAS配套购入APC BK650-CH UPS电源,一根线实现UPS-NAS通讯. 考虑到自带的USB连接线可能损坏,记录引脚定义供DIY之需. UPS BK650采用10芯RJ-50接口 ...

  6. jquery form表单赋值封装

    ;!(function ($) { $.fn.setFormValue = function (options) { var $this = $(this); $.each(options, func ...

  7. Django models 关联（一对多，多对多，一对一）

    参考:https://blog.csdn.net/houyanhua1/article/details/84953388

  8. 1级搭建类111-Oracle 19c SI FS（Windows Server 2019）公开

    Oracle 19c 单实例文件系统在Windows Server 2019上的安装 在线查看

  9. 小白月赛22 G : 仓库地址

    G : 仓库地址 考察点: 二维中位数 坑点 : 做就 OK 析题得侃: 我们发现 x 和 y 是相互独立的,也就是说先移动 x 或者先移动 y 都是可以到达一个点的,所以我们可以先找到 横坐标的 中 ...

  10. java读取解析application.yml

    java读取解析application.yml 不用依赖spring容器,可单独使用. bug已修改... 第一步.首先要2个jar <!-- properties和yaml格式化 --> ...