Home >Web Front-end >HTML Tutorial >css实现的在图片上面添加文字说明_html/css_WEB-ITnose
css实现的在图片上面添加文字说明_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:30:373437browse
css实现的在图片上面添加文字说明:
在一些图片效果中，图片上面会有文字说明，下面就通过代码实例介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.thediv{ width:400px; height:200px; position:relative;}img{ width:400px; height:200px;}.thediv span{ width:400px; height:50px; display:block; text-align:center; line-height:50px; background-color:#333; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; position:absolute; top:100px; color:red;}</style></head><body><div class="thediv"> <img src="mytest/demo/tree.jpg"/ alt="css实现的在图片上面添加文字说明_html/css_WEB-ITnose" > <span>蚂蚁部落欢迎您</span></div></body></html>
以上代码实现了我们的要求，图片上面有文字说明，并且具有半透明效果。实现原理非常的简单，也就是设置最外层div使用相对定位，然后设置span元素绝对定位，这样就可以以外层div为定位参考对象，然后设置top属性值就可以了。但是上面的并不完美，因为不但背景透明了，而且文字也透明了，这往往并不是我们希望看到的，代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.thediv{ width:400px; height:200px; position:relative;}img{ width:400px; height:200px;}.thediv span{ width:400px; height:50px; display:block; text-align:center; line-height:50px; position:absolute; top:100px;}.content{ background-color:#333; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}.text{ color:red; z-index:100;}</style></head><body><div class="thediv"> <img src="mytest/demo/tree.jpg"/ alt="css实现的在图片上面添加文字说明_html/css_WEB-ITnose" > <span class="content"></span> <span class="text">蚂蚁部落欢迎您</span></div></body></html> 以上代码实现了我们的要求，背景透明但是文本不透明。在上面的代码中，之所以文字透明，是因为透明属性具有继承性，子元素也会出现透明效果，这样就可以利用定位的方式将存放文本的span元素覆盖与半透明的span元素之上。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12679
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：(原)前端知识杂烩_html/css_WEB-ITnoseNext article：CSS如何实现div的透明效果_html/css_WEB-ITnose