Css 圖片和文字的混排
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔1</title>
<style type="text/css">
#hello_img {
display: block;
width: 256px;
height: 256px;
background: transparent url(Font_File_Alt.png) no-repeat;
}
#hello_img:hover {
//BACKGROUND-image: url(Dashboard.png);
}
#hello_div{
width: 256px;
height: 256px;
}
#hello_div:hover {
//border:2px solid #669;
}
#hello_a{position:absolute;}
#hello_a:hover{border:1px solid #06C;}
#hello_a span{
width:256px;
background:#000;
display:block;
position:absolute;
bottom:0;left:0;
color:#fff;
filter:alpha(opacity=50);-moz-opacity:0.6;opacity:0.6;
font:bold 12px/30px Verdana, Arial;
text-align:center;
cursor:hand;
}
#hello_a:hover span{text-decoration:underline}
</style>
</head>
<body>
<div id="hello_div" >
<a id="hello_a" href="#">
<img id="hello_img"/>
<span>ok</span>
</a>
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
position:absolute下，top:0,right:0,bottom:0,left:0 結合margin:auto的作用（讓明確寬高的盒子水平垂直居中於父元素）
絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie