css怎么设置文字在图片上面

目录：

• 1、css怎么在图片上添加文字
• 2、css怎么让文字显示在图片的上面
• 3、css 怎么设置文字在图片上并居中

css怎么在图片上添加文字

文字在图片上显示

!DOCTYPE html

html

head

title/title

meta charset="UTF-8"

style

#abox{

position:relative;/*容器相对定位*/

width:300px;/*宽度300px*/

margin:0 auto;/*横向居中*/

}

#abox img{

width:300px;/*宽度300px*/

}

span{

position:absolute;/*文字容器绝对定位*/

display:block;/*span转为块元素*/

width:100%;/*宽度相对于父容器100%*/

text-align:center;/*文字居中*/

top:0;/*距离父容器顶部0*/

left:0;/*距离父容器左侧0*/

color:red;/*文字颜色红色*/

font-size:18px;/*文字大小既文字高度18px*/

font-weight:bold;/*文字加粗*/

}

/style

/head

body

div id="abox"!--容器，相对定位--

  img src="https://vps.456.cn/p/123.jpg"!--图片--

  span我要显示文字/span!--文字，绝对定位--

/div

/body

/html

css怎么让文字显示在图片的上面

工具/材料：电脑。

css让文字显示在图片上的操作步骤如下：

1、首先在div里面书写文字，然后放入1张图片。

2、这时应该先给div设置宽度和高度，保证文字有1个范围。

3、然后通过background给div添加1张图片作为它的背景。

4、然后通过url()来连接图片，这个时候url里面放置的就是背景图片的路径。

5、然后放入1张图片用作背景，注意路径正确。

6、最后点击保存，文字就会覆盖在图片上，css让文字显示在图片上的问题就解决了。

css 怎么设置文字在图片上并居中

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的style标签中，输入css代码：span {position: absolute; top: 45px; left: 180px;}。

3、浏览器运行index.html页面，此时成功通过css设置了文字在图片上面居中显示。