如何在html的页面中插入背景图上面加文字?

html-css011

如何在html的页面中插入背景图上面加文字?,第1张

你给一个div

添加背景图,不影响在这个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>