正文
图片如何用css文本样式,图片如何用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="123.jpg"!--图片--
span我要显示文字/span!--文字，绝对定位--
/div
/body
/html
相关问答
Q1: 如何用CSS样式控制文字浮于图片上方
用CSS样式控制文字浮于图片上方，这个我们首先要明确的知道一个层的概念，这里就是将图片为一个层，然后文字又是一个层，然后我们使用一个position定位，将文字定于图片的位置，然后使用z-index这个层属性，来做，z-index的数值越大，层就越在上面，这里通过具体的代码来理解：
html
head
style
.headr{
width:300px;
height:200px;
border:1px
solid
#f00;
z-index:100;
}
.wenzi{
position:absoulte;
left:100px;
//只是假定的值，具体需测量
top:200px;
z-index:101;
z-index的数值越大，层就越在上面
}
/head
body
div
class="headr"
//页头
img
src='图片的地址'
/div
div
class='wenzi'
p我会在图片的上面/p
/div
/body
/html
Q2: 1、使用CSS 设置文本样式有哪些？
1、使用CSS 设置文本样式有：color、letter-spacing、line-height、text-align、text-decoration、word-spacing
2、使用CSS 设置背景颜色的标签background-color，背景图片的标签：background
3、使用CSS 设置的其他元素有哪些？margin、padding、position等
Q3: 怎么使用CSS让图片水平垂直都居中？
CSS是层叠样式表。下面，我们来看看怎么使用CSS让图片水平垂直都居中吧。
01
新建一张文档
在桌面新建一张文本文档，改名为1.txt，如下图所示：
02
基础代码
然后打开文本文档，编写基础代码，再把桌面上的老虎图片引入进去，如下图所示：
03
后缀名
然后把文本文档后缀名改为.html，如下图所示：
04
运行网页
然后在浏览器中运行网页，现在图片有了，只是还没有居中，图片居住代码要用CSS写，如下图所示：
05
CSS代码
然后写上CSS代码，如下图所示：
06
垂直水平居中
可以看到图片已经垂直和水平居中，如下图所示：
07
总代码
!DOCTYPE html
head
titlehtml/title
style type="text/css"
.picTiger{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/style
/head
body
img class="picTiger" src="C:/Users/Administrator/Desktop/1.png"
/body
html
Q4: html+css如何在图片上添加文字
可以。
以html为例，步骤：
一、在body中建立文字信息以及图片内容，也就是在header中包含两个同级，图片和文字。
二、在CSS中对文字图片进行简单样式添加，效果如图所示；大盒子使用描边显示，里面包含了图片和下面的文字。
三、想要将文字弄到画面上去，这时候需要对header添加相对定位，对文字标签p添加绝对定位。
四、对文字添加了绝对定位后，如图效果，然后就需要对其设置下位置关系了。
五、位置关系通常就是top bottom left right 上下左右四个方向了，最后完成了。
