本文章向码农介绍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. 使用jenkins进行项目的自动构建部署

    jenkins 简介 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括:持续的软件版本发布/测试项目和监控外部调用执行的工作. 官网地址地址: https://je ...

  2. 【转】C# Socket通信编程

    https://www.cnblogs.com/dotnet261010/p/6211900.html#undefined 一:什么是SOCKET socket的英文原义是“孔”或“插座”.作为进程通 ...

  3. 为什么在开发中大部分的时候都在用session而Application基本上都不去使用?

    问题描述 为什么在开发中大部分的时候都在用session而Application基本上都不去使用? 为什么在开发中大部分的时候都在用session而Application基本上都不去使用?为什么在开发 ...

  4. iOS runtime实用篇--和常见崩溃say good-bye

    源码 https://github.com/chenfanfang/AvoidCrash 程序崩溃经历 其实在很早之前就想写这篇文章了,一直拖到现在. 程序崩溃经历1 我们公司做的是股票软件,但集成的 ...

  5. 最大似然估计和最大后验概率MAP

    最大似然估计是一种奇妙的东西,我觉得发明这种估计的人特别才华.如果是我,觉得很难凭空想到这样做. 极大似然估计和贝叶斯估计分别代表了频率派和贝叶斯派的观点.频率派认为,参数是客观存在的,只是未知而矣. ...

  6. CTF-练习平台-Misc之 Convert

    十八.Convert 打开后发现是01代码,转换为16进制代码如下 将代码复制到winhex里面发现是rar文件,保存 打开后发现里面有个图片 解压后在图片的属性里发现一段base64代码,对其解密 ...

  7. jsp页面编写锚点，和html页面编写锚点

    html锚点的编写方式,在jsp中不兼容.因此在写动态网页时,需要注意 一:html页面中的锚点编写方式 HTML锚点 <a href="#abc">goto1< ...

  8. css文字和背景色渐变色

    定义一个div: <div class="shop-title" >上海迪士尼度假区官方旗舰店</div> 使用css: .shop-title{ widt ...

  9. Oracle 表空间与数据文件

    -============================== --Oracle 表空间与数据文件 --============================== /* 一.概念 表空间:是一个或多 ...

  10. requestAnimationFrame 提高动画性能的原因

    与setTimeout相比,requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机.具体一点讲,如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次,如果刷新 ...