本文章向码农介绍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. webView的使用以及总结

    一.webview是什么? Android WebView 做为承载网页的载体控件,他在网页显示的过程中会产生一些事件,并回调给我们的应用程序,以便我们在网页加载过程中做应用程序想处理的事情.比如说客 ...

  2. 题目1003：A+B

    题目1003:A+B 时间限制:1 秒内存限制:32 兆 题目描述: 给定两个整数A和B,其表示形式是:从个位开始,每三位数用逗号","隔开. 现在请计算A+B的结果,并以正常形式 ...

  3. PyTorch 数据集类 和 数据加载类 的一些尝试

    最近在学习PyTorch,  但是对里面的数据类和数据加载类比较迷糊,可能是封装的太好大部分情况下是不需要有什么自己的操作的,不过偶然遇到一些自己导入的数据时就会遇到一些问题,因此自己对此做了一些小实 ...

  4. Oracle Statistic 统计信息 小结

    oraclestatisticstabledatabasesqldictionary   目录(?)[-] 直方图上列的信息说明 直方图类型说明   一.  Statistic 说明 Oracle 官 ...

  5. leetcode-3-LongestSubstringWithoutRepeatingCharacters

    problem:Longest Substring Without Repeating Characters to be continue

  6. 不要使用 Dispatcher.Invoke，因为它可能在你的延迟初始化 Lazy 中导致死锁

    WPF 中为了 UI 的跨线程访问,提供了 Dispatcher 线程模型.其 Invoke 方法,无论在哪个线程调用,都可以让传入的方法回到 UI 线程. 然而,如果你在 Lazy 上下文中使用了 ...

  7. 清华集训2016Day4

    清华集训2016Day4 组合数问题(problem) 用卢卡斯定理可知满足条件即将\(n\)和\(m\)分别用\(k\)进制表示,要求\(n\)的每一位都要大于等于\(m\)的对应位.直接数位\(d ...

  8. sdut2408 pick apples （贪心+背包）山东省第三届ACM省赛

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/svitter/article/details/24642587 本文出自:http://blog.c ...

  9. Apache+modproxy布置tomcat集群

    一.环境: Apache: 2.2.14: 下载地址:http://archive.apache.org/dist/httpd/binaries/win32/ Tomcat: 7.0.82 JDK1. ...

  10. xhan/qqbot试用

    xhan/qqbot试用 啥是qqbot?基于WebQQ协议的QQ机器人.命令行工具,Hubot支持! 怎样安装?首先要安装CoffeeScript windows:安装nodejs:主页上就有下载C ...