怎么用CSS+DIV在图片上布局文字?

html-css015

怎么用CSS+DIV在图片上布局文字?,第1张

div是将网页区块化处理,css是给对应的div应用对应的样式,你所说的图片上进行文字处理,有两种办法,:1将图片变成该区块的背景图,<div style="background:url(images/index8_29.gif) repeat-y">然后在这个区块中你就可以自己定义文字了,比如<div style="fontsize:12pxcolour:#000000margin-left:auto

margin-right:auto">所要放的文字</div></div>

不明白你是什么意思。是把鼠标放在图片上显示文字还是左边是图片,右边是文字,用css设置文字的样式。

要是第一种,在<img src="xx.jpg" title="这块写显示的文字" />

要是第二种,设文字这块为一个div。在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>