添加背景图,不影响在这个div里面添加文字的,比如
.class{width:
200pxheight:
200pxbackground:
url("图片路径")
no-repeat}
注释:background:
url("图片路径")
no-repeat
repeat:
平铺整个页面,左右与上下
repeat-x:
在x轴上平铺,左右
repeat-y:
在y轴上平铺,上下
no-repeat:
图片不重复
你的文字内容
那么在这个div的背景图片就有了,你在里面写文字就可以了,如果你想给文字放到特定位置的话就需要定位了,
这个其实很简单,实现方法也有很多,基本属于简单布局的阶段。
大概思路是把这个图片放到div里面(不是img标签,是当作div的背景图片),那么div标签里面再去嵌套你需要放置的文字,用style来控制一下格式就好了,在里面可以所是想怎么显示就怎么显示。
下面是一个参考例子:
代码:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-image: url('image/img1.jpg')width: 960pxheight: 600pxmargin: auto">
<h1>第一段文字</h1>
<span style="text-align: rightdisplay: blockmargin-top: 50px">第二段文字我想放在右边,我还想离第一段远一点</span>
<span style="display: blocktext-align: centerfont-size: 35pxmargin-top: 20pxcolor: red">第三段文字我想放在中间,要大一点</span>
</div>
</body>
</html>
效果:
单纯的html要实现你说的效果很难,必须html和css配合才可以,首先用css为需要设置背景的元素设置背景,然后用html写文字等内容。附加一个简单例子,希望帮到你。(其中1.jpg跟这个页面在一个路径)
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus&#174">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
margin:0
padding:0
}
.flower{
background:url("1.jpg") center center no-repeat
position:relative
width:100%
height:100%
}
table{
margin:0 auto
}
</style>
</head>
<body>
<div class="flower">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</table>
</div>
</body>
</html>