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实现文字半透明显示在图片上方法的更多相关文章

  1. Eclipse键盘输出文字，显示到屏幕上方法

    方法1 /*标准的思路: * 分析: * 1.来源 * 键盘:System.in * 2.目的地 * 屏幕:System.out * 文件:FIle * 3.分别分析:源,目的地流的类型(字符,字节) ...

  2. Android使用ShowcaseView加入半透明操作提示图片的方法

    http://beeder.me/2014/11/11/how-to-add-a-semi-transparent-demo-screen-using-showcaseview/ 这篇文章具体介绍了如 ...

  3. div+css（ul li）实现图片上文字下列表布局

    css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...

  4. android中Textview 和图片同时显示时，文字省略号显示，图片自动靠到右边

    很纠结的一个标题,实在是不知道怎么去描述这个现象. 上图片吧,先看看需求是什么样的. 1.需求: ​ 视频与票的图标跟在标题后面显示,当标题过长时icon显示到省略号…后(textview省略号显示, ...

  5. CSS控制文字只显示一行 超出部分显示省略号

         <p style="width: 120px; height: 50px; border: 1px solid blue; white-space: nowrap; over ...

  6. 使用Netty进行Android与Server端通信实现文字发送接收与图片上传

    ANOTHER TITLE: Let’s use netty to achieve text send and receive and  image transfer to server based ...

  7. CSS控制文字只显示一行，超出部分显示省略号

    <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"&g ...

  8. 新浪微博客户端(31)-显示相册图片上的GIF标记

    DJStatusPhotoView.h #import <UIKit/UIKit.h> @class DJPhoto; @interface DJStatusPhotoView : UII ...

  9. 【CSS】文字超出显示省略号&连续字符换行

    方法1.多行控制(css3) .text { width: 100%; word-break: break-all; display: -webkit-box; -webkit-line-clamp: ...

随机推荐

  1. Lithium: HTML5 响应式的单页面模板

    在线演示:http://www.gbtags.com/gb/demoviewer/2507/837ac02e-4963-46c9-83ee-a0a0bb867f7f/3.-Lithium|app|in ...

  2. C-IDE使用指南

    HI  您好: 亲爱的学员,本文章是基于C-IDE的入口使用指南,您能够查看demo项目来了解C-IDE详细操作哦~ 如有疑问您可提交反馈来咨询,或扫描下方二维码增加官方微信群.我们会认真对待且具体回 ...

  3. js冒泡法和数组转换成字符串

    js代码: window.onload = function(){ var mian = document.getElementById( "mian" ); var mian1 ...

  4. Android内存泄漏分析实战

    内存泄漏简单介绍 java能够保证当没有引用指向对象的时候,对象会被垃圾回收器回收.与c语言自己申请的内存自己释放相比,java程序猿轻松了非常多.可是并不代表java程序猿不用操心内存泄漏.当jav ...

  5. js 函数节流throttle 函数去抖debounce

    1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...

  6. [转发]using的几种用法

    1.using指令.using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到. ...

  7. linux(Centos)下编译安装gcc4.8.2

    欢迎转载.转载请注明原文地址:http://blog.csdn.net/majianfei1023/article/details/46811159 近期要用到c++ 11,所以没办法仅仅得把那台ce ...

  8. ubuntu——Kconfig、.config、Makefile的关系

    原文地址:http://blog.csdn.net/estate66/article/details/5886816 ,本人对此文有改进. 当我们编写完一个驱动后,我们要把它以模块形式编译或者直接编译 ...

  9. Python 3.x 连接 pymysql 数据库

    首先,需要安装库: 使用 pycharm IDE,如PyCharm,可以使用 project python 安装第三方模块. [File] >> [settings] >> [ ...

  10. Windows7下搭建Android开发环境

    以后工作中要用到android开发,所以想搭建好开发环境,笔记本装的是win7 准备文件: 1 下载Android SDK http://code.google.com/android/downloa ...