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>

大家可以根据自己的需要自己设置效果。

转载于:https://www.cnblogs.com/huangf714/p/5876152.html

CSS实现文字半透明显示在图片上方法相关推荐

css鼠标点在文字上背景透明,CSS实现文字半透明显示在图片上方法(示例代码)
CSS实现文字半透明显示在图片上方法在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
html图片从透明到显示,css 文字半透明显示在图片上
文字显示在图片上 *{border:none;text-decoration:none} .wrap{margin:8px;position:relative} .photo a{position:a ...
css如何实现鼠标移至图片上显示遮罩层及文字
css如何实现鼠标移至图片上显示遮罩层及文字问题:一张图片当鼠标移动到上方时,会显示一个遮罩层,并且显示一些提示文字 html: <div class="contentimg&quo ...
鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字
搜索这个效果的时候,很多人都是用css结合jQuery实现的,其实直接用css也可以实现哦~ 效果前: 效果后: 代码: <!DOCTYPE html> <html lang=&qu ...
将文字定位到浮动图片上|CSS
将文字定位到浮动图片上CSS 效果展示 <div class="remmend-item"><div class="image">< ...
css设置标题边框,css 如何让文字标题显示在边框上？
如图,如何让文字标题显示在边框上? <fieldset> <legend>[使用方法]</legend> </fieldset> 如果需要更精确的扩展, ...
CSS 设置文字只显示一行，多余显示省略号
CSS 设置文字只显示一行,多余显示省略号 .view-text{/**思路:1.设置inline-block属相2.强制不换行3.固定高度4.隐藏超出部分5.显示"--"*/di ...
三星手机实现airtest自动化屏幕显示比例小或测试报告中操作的位置未显示在图片上
三星手机实现airtest自动化屏幕显示比例小或测试报告中操作的位置未显示在图片上 1.三星手机连接到airtestIDE中只显示了很小一部分,如图所示: 2.测试报告中操作的位置未显示在图片上,如图 ...
用图片文字提取大师提取图片上面的文字
用图片文字提取大师提取图片上面的文字扫描图片相信大家都不会陌生,很多的纸质文件或是其它东西,我们都可以通过扫描仪进行扫描,然后以扫描图片的方式出现在电脑中.但是这些扫描图片中的文字不能随意的进行编辑 ...
华为鸿蒙息屏显示,华为息屏显示国徽图片设置方法步骤分享
华为上线的全新息屏壁纸已经可以进行设置使用了,最近大热的华为息屏显示国徽图片就有很多用户十分感兴趣,但是对于如何设置,许多用户都还不清楚,华为怎么设置息屏才能显示国徽图片呢?接下来小编就为大家带来相关 ...

CSS实现文字半透明显示在图片上方法

CSS实现文字半透明显示在图片上方法相关推荐

最新文章

热门文章