名字用id 或者 name
<img src="images/logo.jpg" width="130" height="55" name="豆家底食用菌网" />
<img src="images/logo.jpg" width="130" height="55" id="豆家底食用菌网" />
描述就用:Title 或者 Alt
<img src="images/logo.jpg" width="130" height="55" title="豆家底食用菌网" />
<img src="images/logo.jpg" width="130" height="55" alt="豆家底食用菌网" />
<a href="#"><img src="../images/index_01.jpg" alt="图片名称" /></a>这种是给图片名称
<a href="#" title="链接名称"><img src="../images/index_01.jpg" /></a>
这种是链接的名称
但是都能实现鼠标上移出现文字
推荐第一种
第一步:我们需要准备一个图像作为一个例子,我想在深色背景的背景上放置白色文字。
第二步:将图像和字母放在一个div元素中
将图像和字母放在一个div标签中。在示例中,将文字“万里长城”放在p标记中。当然您可以使用标题标签而不是p标签,也可以使用span标签。
1
2
3
4
<div class = "example" >
<img src="image/greatwall.jpg">
<p>万里长城</p>
</div>
第三步:指定position属性
为每个元素设置css的position属性。
对作为父元素的div指定为position:relative,以及对包含该字符串的p标签设置为absolute。img标签不动。
把p标签的位置设置为top:0left:0。
为了把图像放在横向上,请指定为img标签的宽度为width : 100%。
1
2
3
4
5
6
7
8
9
10
11
12
.example{/*父元素div*/
position: relative/*相対定位*/
}
.example p {
position: absolute/*绝対定位*/
color: white/*文字设为白色*/
top: 0
left: 0
}
.example img {
width: 100%
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)