html和css的图片怎么加,html+css如何在图片上添加文字

html+css如何在图片上添加文字

2018-09-14

效果如图

思路:div相对定位. 图片默认定位, 文字绝对定位

参考代码

html>

/*div1下面 包含着1个图片和1段文字*/

#div1{

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

width: 267px;

height: 140px;

}

/*图片部分的设置*/

#img1{

/*position: static;默认定位,可以省略*/

width: 100%;

height: 100%;

}

/*文字的设置*/

#span1{

position: absolute;/*绝对定位*/

width: 100%;

bottom: 0px;/*离底下0像素*/

left: 0px;/*离左边0像素*/

text-align: center;

font-size: 18px;

color: white;

}

惬意的海岸,旖旎的风景

其他相关的说明：

你给一个div 添加背景图，不影响在这个div里面添加文字的，比如

.class{width: 200px;height: 200px;background: url("图片路径") no-repeat;}

注释：background: url("图片路径") no-repeat;

repeat: 平铺整个页面,左右与上下

repeat-x: 在x轴上平铺,左右

repeat-y: 在y轴上平铺,上下

no-repeat: 图片不重复

你的文字内容

那么在这个div的背景图片就有了，你在里面写文字就可以了，如果你想给文字放到特定位置的话就需要定位了

实际联系：

代码：

无标题文档

.class{width: 600px;height: 600px;background: url("http://img1.91.com/uploads/allimg/131011/645-131011115G5.jpg") no-repeat;}

你的文字内容

效果：

现在 不清楚的是，

如何规范文字的位置以及大小以及字体，颜色。

代码讲解：

无标题文档

./这个“.”不可以掉，掉了， 图片就不显示了。/

class{width: 600px;height: 600px/宽和高是定义后面的图片的尺寸的，如果真实的图片比这个参数的数值大，那么就会有图片的部分被裁掉。/;

background: url("http://img1.91.com/uploads/allimg/131011/645-131011115G5.jpg /图片的地址/") no-repeat;}

你的文字内容

第三种理解：

有部分的理解但不是很理解：

用CSS往图片上嵌入文字有二种方法，分别如下：

第一种方法、添加一个DIV，采用绝对定位，图片所属DIV为基准。

参考代码如下：

文字

第二种方法、图片作为背景图片。

参考代码如下：

wenzi

<

免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。

http://www.pinlue.com/style/images/nopic.gif