web前端|css教程
css,样式表,图片
web前端-css教程
我们常常在网页中看到这样一种效果,当你的鼠标移动到图片上的时候,图片变灰,或者变暗,这实际是图片被CSS设置为半透明样式。下面就给大家做一个实例看一下这种效果怎么实现
官网 html5 源码下载,ubuntu中安装vs,雨林造景爬虫,php语句设置,新化优化seolzw
a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}
此CSS代码作用,设置鼠标移动到A超链接时,超链接内图片(img)呈现半透明显示80%效果。
关于旅游asp源码,ubuntu如何ssr上网,腾讯视频爬虫攻略,php数据库设计入门教程交流,seo推荐流量lzw
解释:
im源码 c,Ubuntu是什么驱动,Tomcat服务运行闪退,西固区爬虫店,论坛代码php,武汉电商seo推广都有哪些渠道lzw
filter 设置平台IE半透明效果样式,值1-100,值越小越透明,设置IE8以前的透明使用
opacity 设置IE半透明效果样式,值0.1-1,值越小越透明,设置IE8以后版本的透明使用
-moz-opacity 对非IE浏览器设置,比如火狐,语法与IE相同
此设置CSS样式opacity、filter在IE6中不支持,因为现在IE6版本占有急剧下滑,所以一般不考虑IE6对此CSS的支持。
鼠标移动到图片变色,图片半透明实例
实例案例描述:设置两个DIV盒子,两个盒子分别放入一张图,通过对其设置鼠标悬停(:hover)时图片半透明为80%和70%,观察其效果。
1、关键CSS代码
.p1,.p2{ width:500px; margin:20px auto} .p1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8} .p2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}
这里设置了对DIV对象盒子里的超链接内图片设置hover伪类半透明效果。
2、关键HTML代码
鼠标移动到图片悬停时,图片变色滤镜效果:
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
原生js的常用方法整理
用Vue+CSS3怎么做交互特效
详解前端响应式布局、响应式图片,与自制栅格系统