Css 图片和文字的混排

最新推荐文章于 2024-04-24 10:02:53 发布

brucewata

最新推荐文章于 2024-04-24 10:02:53 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签： css xhtml div filter border url

本文链接：https://blog.csdn.net/brucewata/article/details/7393663

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

优惠劵

brucewata

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css 图片和文字的混排

无标题文档1#hello_img { display: block; width: 256px; height: 256px; background: transparent url(Font_File_Alt.png) no-repeat;}#hello_img:hover { //BACKGROUND-image: url(Da
复制链接

扫一扫