本文章向码农介绍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. UIView.animateWithDuration 没有动画过渡效果直接跳到最后

    当我在viewDidLoad()方法内添加以下代码的时候发现程序运行时不会有动画过度效果,而是直接跳到了最后. let x = (self.view.bounds.size.width - 268) ...

  2. C语言基础:分支语句和常见运算符 分类： iOS学习 c语言基础 2015-06-10 21:44 13人阅读 评论(0) 收藏

    if(判断条件){ 执行语句; }else if(判断条件){ 执行语句; } switch (整型表达式){  case 值1: 执行语句; break; case 值2: 执行语句; break; ...

  3. Samsung_tiny4412(驱动笔记10)----mdev,bus,device,driver,platform

    /*********************************************************************************** * * mdev,bus,de ...

  4. HDU - 6311:Cover（欧拉回路，最少的一笔画覆盖无向图）

    The Wall has down and the King in the north has to send his soldiers to sentinel. The North can be r ...

  5. 生成html报告并整合自动发动邮件功能

    from HTMLTestRunner import HTMLTestRunnerfrom email.mime.text import MIMETextfrom email.header impor ...

  6. Linux设备树

    一.设备树编译 1.编译设备树:cd linux-x.xx & make dtbs,生成的dtb在目录linux-x.xx/arch/xxx/boot/dts下 2.反编译dtb,生成dts: ...

  7. SVN服务器搭建和使用（四）

    在第一次使用TortoiseSVN从服务器CheckOut的时候,会要求输入用户名和密码,这时输入框下面有个选项是保存认证信息,如果选了这个选项,那么以后就不用每次都输入一遍用户名密码了. 不过,如果 ...

  8. 检索关键字 nyoj

    检索关键字 时间限制: 1000ms 内存限制: 65536KB 64位整型:      Java 类名: 上一题 提交 运行结果 统计 讨论版 下一题 类型: 没有   没有   难度        ...

  9. 使用 Visual Studio Code （VSCODE）写 C51 （持续更新 2018-04-09）

    Keil C51 那代码编辑器就是上一个时代的产物, 不适合现代人使用. 但是用 Visual Studio Code (VSCODE)就舒服多了.但需要安装和配置一些扩展: 按 Ctrl + Shi ...

  10. [C++] Win32 API 的多线程Timer管理Trick - 利用PostThreadMessage

    有时候我们需要在程序里定时地完成一些任务, 比如5秒后发送, 10秒后弹窗之类的操作. 这就需要一个类似于定时器的组件. 这个组件在windows.h里被称为Timer. 设置一个Timer 第一步当 ...