CSS实现文字半透明显示在图片上方法
CSS实现文字半透明显示在图片上方法
在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子。
CSS让一行文字显示在图片的底部,用来说明图片的内容,当作图片标题,标题文字和背景可以设置半透明,鼠标经过图片时边框换色。
代码预览
代码如下 |
复制代码 |
<head> |
这个功能可以衍生出很多其他的版本,比如说鼠标滑动的时候才显示介绍文字啊。这个还是很常见的。看看下面的效果。
代码预览
代码如下 |
复制代码 |
<head> |
大家可以根据自己的需要自己设置效果。
CSS实现文字半透明显示在图片上方法的更多相关文章
- Eclipse键盘输出文字,显示到屏幕上方法
方法1 /*标准的思路: * 分析: * 1.来源 * 键盘:System.in * 2.目的地 * 屏幕:System.out * 文件:FIle * 3.分别分析:源,目的地流的类型(字符,字节) ...
- Android使用ShowcaseView加入半透明操作提示图片的方法
http://beeder.me/2014/11/11/how-to-add-a-semi-transparent-demo-screen-using-showcaseview/ 这篇文章具体介绍了如 ...
- div+css(ul li)实现图片上文字下列表布局
css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...
- android中Textview 和图片同时显示时,文字省略号显示,图片自动靠到右边
很纠结的一个标题,实在是不知道怎么去描述这个现象. 上图片吧,先看看需求是什么样的. 1.需求: 视频与票的图标跟在标题后面显示,当标题过长时icon显示到省略号…后(textview省略号显示, ...
- CSS控制文字只显示一行 超出部分显示省略号
<p style="width: 120px; height: 50px; border: 1px solid blue; white-space: nowrap; over ...
- 使用Netty进行Android与Server端通信实现文字发送接收与图片上传
ANOTHER TITLE: Let’s use netty to achieve text send and receive and image transfer to server based ...
- CSS控制文字只显示一行,超出部分显示省略号
<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"&g ...
- 新浪微博客户端(31)-显示相册图片上的GIF标记
DJStatusPhotoView.h #import <UIKit/UIKit.h> @class DJPhoto; @interface DJStatusPhotoView : UII ...
- 【CSS】文字超出显示省略号&连续字符换行
方法1.多行控制(css3) .text { width: 100%; word-break: break-all; display: -webkit-box; -webkit-line-clamp: ...
随机推荐
- 安装TeX及中文支持
2014.7.19更新: 以下的笔记适用于在基于Ubuntu的发行版(比方LinuxMint)安装Texlive2013.2014: 第一步依据本机状况.可能不须要. Texlive2014已经能够下 ...
- 不能使用控制器“XXXController”的单个实例处理多个请求。如果正在使用自定义控制器工厂,请确保它为每个请求创建该控制器的新实例。
原因:应用@{Html.RenderAction("aaa","XXX");}时路径路由和动作控制器不能是相同的,不然会的错. 比如:http://localh ...
- Docker配置本地镜像与容器的存储位置
默认情况下Docker的存放位置为:/var/lib/docker 可以通过下面命令查看具体位置: sudo docker info | grep "Docker Root Dir" ...
- js open窗口父子窗口操作
http://zhidao.baidu.com/question/61358246.html?an=0&si=1 js open窗口父子窗口操作 父窗口js代码: function ...
- Android数据库升级实例
第一部分 Andoird的SQLiteOpenHelper类中有一个onUpgrade方法.帮助文档中只是说当数据库升级时该方法被触发.经过实践,解决了我一连串的疑问: 1. 帮助文档里说的“数据库升 ...
- git配置用户名邮箱
通常会配置全局的 用户名 邮箱 例如 姓名@公司邮箱 姓名 git config --global user.name "姓名" git config --global use ...
- Provisional headers are shown(一)
谷歌浏览器调试的时候,这个警告经常出现.但是每次产生的原因可能都是不一样的. 这篇文档记录我遇到的其中一次. 现象:一个并发的错误信息: CAUTION:request is not finished ...
- 网站收到的url请求链接,字母全部变为小写
http://www.ithao123.cn/content-5360465.html
- 有道翻译 / 百度翻译Api
比较推荐使用百度翻译api 不推荐有道翻译,比较水. http://ai.youdao.com/docs/doc-trans-api.s#p02 http://ai.youdao.com/docs/d ...
- JVM 参数详解
1.使用$JAVA_HOME/bin/java 可看到所有参数说明 用法: java [-options] class [args...] (执行类) 或 java [-options] -jar ...