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

Eagle89 2017-07-19

展开全文

效果如图

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

参考代码

<!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: 100%;

height: 100%;

}

/*文字的设置*/

#span1{

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

width: 100%;

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

>








其他相关的说明：

你给一个div 添加背景图，不影响在这个div里面添加文字的，比如
<style>
    .class{width: 200px;height: 200px;background: url("图片路径") no-repeat;}
</style>

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

repeat: 平铺整个页面,左右与上下
repeat-x: 在x轴上平铺,左右
repeat-y: 在y轴上平铺,上下
no-repeat: 图片不重复

<div class="class">
    <p>你的文字内容</p>
</div>

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


实际联系：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .class{width: 600px;height: 600px;background: url("http://img1./uploads/allimg/131011/645-131011115G5.jpg") no-repeat;}
	
</style>

</head>
<div class="class">
    <p>你的文字内容</p>
</div>

<body>
</body>
</html>


效果：


现在 不清楚的是， 
如何规范文字的位置以及大小以及字体，颜色。 




代码讲解：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    ./这个“.”不可以掉，掉了， 图片就不显示了。/
class{width: 600px;height: 600px/宽和高是定义后面的图片的尺寸的，如果真实的图片比这个参数的数值大，那么就会有图片的部分被裁掉。/;
background: url("http://img1./uploads/allimg/131011/645-131011115G5.jpg /图片的地址/") no-repeat;}
	
</style>

</head>
<div class="class">
    <p>你的文字内容</p>
</div>

<body>
</body>
</html>



第三种理解：
有部分的理解但不是很理解：
用CSS往图片上嵌入文字有二种方法，分别如下：