本文章向码农介绍css 图片变色变暗变亮

实例代码如下：

<style>

*{margin:0;padding:0;list-style:none;}

img{border:1px solid #ccc}

.info li { padding:5px;width:144px;float:left}

.info li .img { padding:5px; border:1px solid #CBCBCB;display:block;}

.info li .img:link,.info li .img:visited {border:1px solid #CBCBCB;}

.info li .img:hover{border:1px solid #CBCBCB;background:#f0f0f0;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}

</style>

</head>

<body>

<div class="info">

<ul>

<li><a href="#" class="img" ><img src="#" /></a></li>

<li><a href="#" class="img" ><img src="#" /></a></li>

<li><a href="#" class="img" ><img src="#" /></a></li>

</ul>

</div>

大家可以参考 css3 opacity 属性

原文地址：http://www.manongjc.com/article/837.html

相关阅读：css
鼠标经过图片，图片变色变暗透明

css图片变色变暗变亮的更多相关文章

  1. 基于jQuery悬停图片变色放大特效

    分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width ...

  2. 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和 ...

  3. css图片叠加和底部定位

    css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...

  4. 转：利用node压缩、合并js,css,图片

    1.安装nodejs http://nodejs.org/ 2.安装各自的node package js我用的是UglifyJS github地址:https://github.com/mishoo/ ...

  5. CSS图片列表

    1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...

  6. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  7. css图片垂直居中

    css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...

  8. css 图片 圆形显示区域

    css 图片 圆形显示区域 css 和 div 实现 方形图片 圆形显示 点击下载

  9. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

随机推荐

  1. 结合P2P软件使用Ansible分发大文件

    一 应用场景描述 现在我需要向50+数量的服务器分发Logstash新版本的rpm包,大概220MB左右,直接使用Ansible的copy命令进行传输,命令如下: 1 ansible all  -m  ...

  2. 成为java高级程序员需要掌握哪些

    section 1 1.Core Java,就是Java基础.JDK的类库,很多童鞋都会说,JDK我懂,但是懂还不足够,知其然还要知其所以然,JDK的源代码写的非常好,要经常查看,对使用频繁的类,比如 ...

  3. HRBUST单词接龙

    题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...

  4. OC基础:实例变量和成员变量的区别 分类： ios学习 OC 2015-06-14 17:59 16人阅读 评论(0) 收藏

    摘要:  Objective-C  引入了"实例变量"的概念,但同时, 也经常出现 "成员变量"的声音. 到底什么是实例变量,什么是成员变量,二者的区别是什么呢 ...

  5. python中几个实用的文件操作

    1. 判断指定目录是否存在: os.path.exists(input_folder) 2. 判断指定目录是不是文件夹 os.path.isdir(input_folder) 3. 判断指定目录是不是 ...

  6. vector类转换Mat类

    前言 一个个数据push back到vector之后,可以使用Mat()函数将vector类型转换为Mat类型. 在opencv中Mat类的构造函数中有一个构造函数可以直接把vector类转换为Mat ...

  7. ElasticSearch—分页查询

    ElasticSearch查询—分页查询详解 Elasticsearch中数据都存储在分片中,当执行搜索时每个分片独立搜索后,数据再经过整合返回.那么,如何实现分页查询呢? 按照一般的查询流程来说,如 ...

  8. 了解ASP.NET Core框架的本质

    了解ASP.NET Core框架的本质 ASP.NET Core自身的运行原理和设计思想创建了一个 “迷你版” 的ASP.NET Core框架,并且利用这个 “极简” 的模拟框架阐述了ASP.NET ...

  9. unicode汉字编码

    原来我使用的一直是 \u4e00-\u9fa5 ,今天在匹配中文标点的时候匹配不上,就查了一下相关资料,原来unicode跟中文有关的范围还有好几个. 字符范围表 1.标准CJK文字 范围:\u340 ...

  10. hdu1081 DP类最大子段和（二维压缩+前缀和数组/树状数组计数）

    题意:给出一个 n * n 的数字矩阵,问最大子矩阵和是多少. 由于和最长子段和问题类似,一开始想到的就是 DP ,一开始我准备用两个循环进行 DP ,对于每一个 (i,j) ,考察(i - 1,j) ...