html中怎么让文字在图片的上面

2024-03-26 20:34:15

有时候我们制作HTML页面需要把文字放在图片上面，让网页看起来更好看，但是初学网页设计的小伙伴还不知道HTML中怎样让文字在图片的上面，今天小编我就来分享一下方法。

操作方法

01

首先，先在网页中设置一个div，并且给这个div起一个id。
02

然后我们设置一下这个div的宽度和高度。这里我就设置成200px。
03

如图，按照一般思路，我们会使用img标签来在网页中插入一张图片。
04

然后我们设置img标签的样式，因为图片的大小不一定是跟div一样大，所以我们要设置，以免超出div范围。
05

接着来看看插入图片之后的效果图。
06

接着我们在div中插入文字，随便输入什么文字都可以。
07

然后保存网页预览看效果，可以看到，文字不在图片上面，这就是我们经常遇到的困惑了，接着我们开始解决这个困惑。
08

如图，我们把img标签注释掉，因为img标签插入的图片是内容，已经填满了div，所以如果我们再插入文字，就会超出div的范围。
09

我们需要的是把图片作为背景，而不是作为内容，这就要用到background属性了，我们设置div的background属性。
10

然后使用URL()来连接图片，URL括号里面的参数就是图片的存放路径。
11

如图，我在里面填入图片的相对路径。
12

接着我们再设置背景图片的大小，这样做也是为了让图片适应div，填满整个div。
13

接着我们再来保存看看，可以看到，文字已经在图片的上面了哦。其实，我们应该把图片用作背景，这样文字才可以放在图片上面哦。

赞 (0)

在word文档中如何设置文字环绕图片效果

在word文档编辑文章时,有时需要在文章上插入图片,文字环绕着图片,如图中的效果.是如何做到的呢,详细操作请往下看. 效果如下: 步骤 1.打开word文档,要在文档中插入一张图片. 2.光标在插入图 ...
如何在手机QQ中同时发送文字和图片？

相信很多小伙伴都有在手机上使用QQ,在其中如何才能同时发送文字和图片呢?方法很简单,下面小编就来为大家介绍.方法一:1. 首先,打开手机上的QQ.2. 进入后,打开我们作为测试的聊天窗口.3. 打开后 ...
在PPT中如何设置文字环绕图片

电脑是我们常用的一种智能处理设备,可实现很多功能,熟练掌握操作技巧能让我们的使用过程更加舒心.你知道在PPT中如何设置文字环绕图片吗?快来看看吧! 操作方法 01 打开PPT,单击"开始&q ...
WPS文字中如何设置文字环绕图片

WPS文字中如何设置文字环绕图片呢?下面小编给大家分享一些方法~ 操作方法 01 打开你要进行设置的文档 02 点击你要进行设置的图片然后找到"图片工具",如下图所示 03 在下方 ...
wps中如何设置文字围绕图片

wps设置文字围绕图片的方法: 打开WPS软件,点击菜单"WPS文字"下的"新建",新建一个文档,如图所示接着,在文档中输入需要的文字把光标放在文字中间,点 ...
网页中不能复制文字或者图片的解决方法

操作方法 01 如果我们用的不是IE浏览器,一般情况下,我们可以复制该网页的网络链接,然后打开IE浏览器.将该网页的网络链接粘贴到IE浏览器中,点回车键enter,就打开了刚才那个网页,这时,我们就可 ...
word中如何让文字围绕图片？

在word中一插入图片,感觉排版就乱了,图片也不听使唤,文字和图片不能很好的结合.如果文字能够和图片紧密的结合的一块就漂亮了,下面我就和大家分享一下如何让word中的图片和文字搭配的更美. 操作方法 ...
WORD中如何让文字置于图片之上

办公软件的应用随着电子互联网的普及,越来越重要,而WORD文档在远程操作,会议记录,出行考察等诸多方面使用最广,图文并茂的WORD电子版,使内容清晰明了,一目了然. 小编就WORD图文如何排,什么样的 ...
PPT中如何制作文字和图片镂空的效果呢？

文字和图片镂空的效果,其实是PS中很简单,我们今天看看PPT是怎么制作的. 操作方法 01 打开PowerPoint,并插入一个图片,如图所示. 02 这里时候点击"插入"选项卡, ...