css实现的在图片上面添加文字说明_html/css_WEB-ITnose
程序员文章站
2022-03-30 22:28:32
...
css实现的在图片上面添加文字说明:
在一些图片效果中,图片上面会有文字说明,下面就通过代码实例介绍一下如何实现此效果。
代码实例如下:
在一些图片效果中,图片上面会有文字说明,下面就通过代码实例介绍一下如何实现此效果。
代码实例如下:
蚂蚁部落 蚂蚁部落欢迎您
以上代码实现了我们的要求,图片上面有文字说明,并且具有半透明效果。实现原理非常的简单,也就是设置最外层div使用相对定位,然后设置span元素绝对定位,这样就可以以外层div为定位参考对象,然后设置top属性值就可以了。但是上面的并不完美,因为不但背景透明了,而且文字也透明了,这往往并不是我们希望看到的,代码如下:
蚂蚁部落 蚂蚁部落欢迎您
以上代码实现了我们的要求,背景透明但是文本不透明。在上面的代码中,之所以文字透明,是因为透明属性具有继承性,子元素也会出现透明效果,这样就可以利用定位的方式将存放文本的span元素覆盖与半透明的span元素之上。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12679
更多内容可以参阅:http://www.softwhy.com/divcss/
推荐阅读
-
Javascript实现图片轮播:(一)让图片跳动起来!-吴统威的博客_html/css_WEB-ITnose
-
上面的这个程序,在点击删除表格中的一行时,不能随意删除,不管点击哪个都是从上往下删除,请帮忙让他能够点击每行后的删除,删除该行~谢谢_html/css_WEB-ITnose
-
用CSS3实现带小三角形的div框(不用图片)_html/css_WEB-ITnose
-
html 如何在文本框的背景图片上在加一张图片?_html/css_WEB-ITnose
-
请问各位高手,怎么设置,使得网页窗口中的一张图片一直在浏览器窗口的*,不管浏览器滚动条怎么拉动(也不管滚轮怎么滚动)_html/css_WEB-ITnose
-
网页图片通栏实现的思路,谁能指导一下?_html/css_WEB-ITnose
-
移动设备的HTML页面中图片实现滚动加载_html/css_WEB-ITnose
-
CSS中的背景图片加图片加文字如何实现,谢谢!_html/css_WEB-ITnose
-
利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的_html/css_WEB-ITnose
-
效果已经实现,但是固定宽度的,我想用100%定义,图片就显示不了。_html/css_WEB-ITnose