本文章向码农介绍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. Iview同步异步验证

    直接上代码了: html: <Form ref="termForm" :model="currentData" :rules="ruleTerm ...

  2. HDU 1592 Half of and a Half（大数）

    Half of and a Half Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  3. centos7系统初始化

    echo "# swappiness=0的时候表示最大限度使用物理内存,然后才是 swap空间" >> /etc/sysctl.conf echo -e "v ...

  4. mac 常用开发软件列表

    toolbox app jetbrains系开发工具箱,包含了phpstorm idea等开发工具 Postman 接口调试工具,有插件版和单独的app两种.类似paw Sublime 文本编辑器,类 ...

  5. dockerk个人学习(0)

    接下来几篇记录学习docker和ks的部署搭建环境和应用部署等

  6. Microsoft - Union Two Sorted List with Distinct Value

    Union Two Sorted List with Distinct Value Given X = { 10, 12, 16, 20 } &  Y = {12, 18, 20, 22} W ...

  7. 【java编程】正确重写hashCode和equesl方案

    一. 正确书写hashCode的办法: [原则]按照equals( )中比较两个对象是否一致的条件用到的属性来重写hashCode(). {1}. 常用的办法就是利用涉及到的的属性进行线性组合. {2 ...

  8. 不用webservice wcf提供服务，用Rest更轻量

    从2005年开始就开始有基于服务的开发方式,到08年时候 微软和sun等公司都已经提供了很多基于服务的开发框架 . 微软 .net 平台的基于服务的框架主要有:.NET Remoting.webser ...

  9. ballerina 学习二十七 项目k8s部署&& 运行

    ballerina k8s 部署和docker 都是同样的简单,编写service 添加注解就可以了 参考项目 https://ballerina.io/learn/by-guide/restful- ...

  10. metabase docker-compose 运行说明

    metabase 是一款比较产品化的一个数据分析工具,支持的数据源也比较多 以下为简单的docker-compose 运行文件,同时集成了mongo 以及graphql 引擎,方便数据 的api查询 ...