转自: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. tcp客户端从服务器下载文本文件

    代码讲解: server import socket def send_file_client(new_client_socket, new_client_addr): # 接收客户端需要下载的文件名 ...

  2. C# 中indexOf、lastIndexOf、subString方法的理解

    一.indexOf() indexOf("\\"):返回"\\"字符在此实例中第一个出现的索引位置,实例的下标是从0开始,如果未找到则返回-1. indexOf ...

  3. MVC开发模式以及Smarty模板引擎的使用

    Linux 全局安装 composer 将目录切换到/usr/local/bin/目录 cd /usr/local/bin/ 在 bin 目录中下载 composer curl -sS https:/ ...

  4. 第31届IMO 第2题

    题目 设n>=3,考虑一个圆上由2n-1个不同点构成的集合E.现给E中恰好k个点染上黑色,如果至少有一对黑点使得这两个黑点之间的弧上(两段弧中的某一个)包含恰好E中的n个点,就成这样的染色方法是 ...

  5. Bonny校园app使用体验

    Bonny校园是一款集校园表白墙.失物招领处和二手市场集一体的一款校园app,旨在帮助大学生解决校内的生活问题.这款app功能比较齐全,表白墙内含有许多有趣的信息展示,失物招领处内可以详细的展示捡到东 ...

  6. C++-蓝桥杯-小计算器[进制转化][模拟]

    #include <cstdio> #include <string> #include <cstring> #include <iostream> u ...

  7. Linux内核提权漏洞(CVE-2019-13272)

    漏洞描述 kernel / ptrace.c中的ptrace_link错误地处理了想要创建ptrace关系的进程的凭据记录,这允许本地用户通过利用父子的某些方案来获取root访问权限 进程关系,父进程 ...

  8. 2.Docker Compose 部署应用程序

    部署 Tomcat version: '3.1' services:  tomcat:   restart: always   image: tomcat   container_name: tomc ...

  9. LaTeX技巧011:LaTtex中如何产生直立体希腊字母?

     %\usepackage{upgreek}\upmu \uppi

  10. Notepad++ 个人洁癖

    插件: JSON Viewer 可以以树的形式查看JSON,同时可以格式化JSON,增加缩进. NppExport 可以高亮复制 下载地址: https://github.com/chcg/NPP_E ...