CSS实现文字半透明显示在图片上方法
发布时间：2023-05-10 编辑：jiaochengji.com
教程集为您提供CSS实现文字半透明显示在图片上方法等资源，欢迎您收藏本站，我们将为您提供最新的CSS实现文字半透明显示在图片上方法资源
在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了，下面来看两个文字显示在图片上并且半透明的例子。
CSS让一行文字显示在图片的底部，用来说明图片的内容，当作图片标题，标题文字和背景可以设置半透明，鼠标经过图片时边框换色。
代码预览
| 代码如下 | 复制代码 |
| <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字显示在图片上</title>
<style type="text/css">
*{border:none;text-decoration:none}
.wrap{margin:8px;position:relative}
.photo a{position:absolute;display:block;border:1px solid #555555;}
.photo a:hover{border:1px solid #FFFFFF;}
.photo span{width:633px;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;}
.photo a:hover span{text-decoration:underline}
</style>
</head>
<body>
<div class="wrap">
<div class="photo"><a href="#">
<img src="/wp-content/uploads/2014/08/bq.jpg" border="0" alt=""/><span>标题层叠在图片上，标题文字和背景半透明。鼠标经过边框换色。</span></a></div>
</div>
</body> |
这个功能可以衍生出很多其他的版本，比如说鼠标滑动的时候才显示介绍文字啊。这个还是很常见的。看看下面的效果。
代码预览
| 代码如下 | 复制代码 |
| <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字显示在图片上</title>
<style type="text/css">
*{border:none;text-decoration:none}
.wrap{margin:8px;position:relative}
.photo a{position:absolute;display:block;border:1px solid #555555;}
.photo a:hover{border:1px solid #FFFFFF;}
.photo span{width:633px;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;display:none;}
.photo a:hover span{text-decoration:underline;display:block;}
</style>
</head>
<body>
<div class="wrap">
<div class="photo"><a href="#">
<img src="/wp-content/uploads/2014/08/bq.jpg" border="0" alt=""/><span>标题层叠在图片上，标题文字和背景半透明但是不显示。鼠标经过边框换色并且显示标题。</span></a></div>
</div>
</body> |
大家可以根据自己的需要自己设置效果。
您可能感兴趣的文章：
CSS实现文字半透明显示在图片上方法
网页特效之让css使网页图片半透明
CSS定义网站页面背景透明几个例子
photoshop设计半透明的塑胶玻璃字效果制作教程
CSS Sprites图片不清晰的问题(2倍的 CSS Sprites 如何缩放)
css实现透明度兼容IE, Firefox, Chrome, Safari代码
HTML5 Canvas渐进填充与透明实现图像的Mask效果
jquery半透明设置实现代码
CSS设置半透明背景实例详解
网页中几个常用到的 CSS 样式
