标题叠加在图片上面的几种显示方式

最新推荐文章于 2021-08-04 07:39:49 发布

lishumingwm163com

最新推荐文章于 2021-08-04 07:39:49 发布

阅读量749

点赞数

分类专栏：项目管理 wicket 归档模式 poi js java json velocity lucene 数据库笔记本维修 oracle linux poi操作excel excel java unicode 汉字

本文链接：https://blog.csdn.net/lishumingwm163com/article/details/84530282

版权

java 同时被 3 个专栏收录

49 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

数据库

13 篇文章 0 订阅

订阅专栏

很多新改版的网站都会在图片显示上下一些文章，比如加边框和背景之类的修饰，使之在视觉上有较之以往不同的新意。下面来模仿几个网站在图片+标题表现上的一些效果。

1.标题层叠在图片上，标题文字和背景半透明。鼠标经过边框换色。
Html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标题层叠在图片上，标题文字和背景半透明。鼠标经过边框换色。</title>
<style type="text/css">
body{background:#333}
*{border:none;text-decoration:none}
.wrap{margin:10px;position:relative}
.photo a{position:absolute;display:block;border:1px solid #666;}
.photo a:hover{border:1px solid #fff;}
.photo span{width:500px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;font:bold 12px/30px Verdana, Arial; text-align:center;cursor:hand;}
.photo a:hover span{text-decoration:underline}
</style>
</head>

<body>
<div class="wrap">
<div class="photo"><a href="#">
<img src="http://www.dangbao.net/attachments/month_0809/i200894153036.jpg" border="0" alt=""/><span>标题层叠在图片上，标题文字和背景半透明。鼠标经过边框换色。</span></a& gt;</div>
</div>
</body>

2.鼠标经过图片，半透明的标题从下面出现。边框换色。
Html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过图片,边框变色,图片上出现半透明文字</title>
<style type="text/css">
body{background:#333}
img{border:none}
.wrap{margin:10px;position:relative;}
.photo a{position:absolute;display:block;border:1px solid #999;padding:2px}
.photo a:hover{border:1px solid #fff;text-decoration:none}
.photo a span {display:none;cursor:hand;text-align:center;font:bold 12px/30px Verdana, Arial;}
.photo a:hover span{width:500px;margin:0 2px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
</style>
</head>

<body>
<div class="wrap">
<div class="photo"><a href="#">
<img src="http://www.dangbao.net/attachments/month_0809/i200894153036.jpg" border="0" alt=""/><span>鼠标经过图片,边框变色,图片上出现半透明文字</span></a>< /div>
</div>
</body>

lishumingwm163com

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标题叠加在图片上面的几种显示方式

很多新改版的网站都会在图片显示上下一些文章，比如加边框和背景之类的修饰，使之在视觉上有较之以往不同的新意。下面来模仿几个网站在图片+标题表现上的一些效果。1.标题层叠在图片上，标题文字和背景半透明。鼠标经过边框换色。Html&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"...
复制链接

扫一扫