日期:2014-05-17  浏览次数:21280 次

如何将图片和文字重叠显示?
<dl>
<dt>
<img   src= "图片 "/> <strong> 文字 </strong>       //问题!!!
</dt>
<dd>
内容
</dd>
</dl>


问题:如何将图片和文字重叠显示?

效果就像blog.csdn.net的 "头条推荐 "效果一样.

------解决方案--------------------
不好意思,刚刚才看到,其实,你上当了,我也上当了.那个图片不是你想象的图片样式
我刚才把源码拿出来看了下,分析给你看

<dt>
<img alt= " " class= "right " src= "ui/images/empty.gif " />
<!--上面用到了empty.gif绝对路径是blog.csdn.net/ui/images/empty.gif这是个1px X 1px的透明图片-->
<a href= "http://blog.csdn.net/feed.aspx?Column=f57b94b7-6b0a-42dd-802c-f01de024a3f3 " target= "_blank "> <img alt= " " class= "rss " src= "ui/images/empty.gif " /> </a>
<!--上面用到了empty.gif绝对路径是blog.csdn.net/ui/images/empty.gif这是个1px X 1px的透明图片-->
<img alt= " " class= "left " src= "ui/images/empty.gif " />
<!--上面用到了empty.gif绝对路径是blog.csdn.net/ui/images/empty.gif这是个1px X 1px的透明图片-->
<strong> 头条推荐 </strong>
<!--关键全在这里,对strong进行了定义,我在最后下面贴出给你看你就明白了-->
</dt>

------------------华丽的分割线-----------------------
这里是关键,选自blog.csdn.net/ui/styles/index.css第73行开始

#pageContent dt
{
height: 28px;
background: #46A2D6 url(index/bgPageContentDT.gif) repeat-x top;
}

#pageContent dt的样式
看清楚里面用的背静图片,它的地址是http://blog.csdn.net/ui/styles/index/pageContentTopDT.gif
这也就是dt部分的背景

------------------华丽的分割线-----------------------

#pageContent dt strong
{
color: #FFFFFF;
line-height: 28px;
padding-left: 24px;
background-position: 6px 4px;
background-repeat: no-repeat;
background-image: url(index/bgPageContentDTJut.gif);
}

#pageContent dt strong样式
里面定义的背静图片是 "头条推荐 "前面的箭头
在strong里面用到了padding-left.

看到的float不是作用在这个地方的.float可以让文字挤文字,文字挤图片行不行??我还没时间试下,刚接任务了,先忙下