Home  >  Article  >  Web Front-end  >  css 鼠标经过图片,图片变色变暗透明

css 鼠标经过图片,图片变色变暗透明

WBOY
WBOYOriginal
2016-06-01 09:53:206265browse

1、CSS代码

<code class="language-css">.div1,.div2{ width:500px; margin:20px auto} 
.div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8} 
.div2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7} </code>

这里设置了对DIV对象盒子里的超链接内图片设置hover伪类半透明效果。

2、HTML代码

<code class="language-html"><p>css 鼠标经过图片,图片变色变暗透明</p> 
<div class="div1"><a href="#"><img  src="images/div-a-bg.png" alt="css 鼠标经过图片,图片变色变暗透明" ></a></div> 
<div class="div2"><a href="#"><img  src="images/an.gif" alt="css 鼠标经过图片,图片变色变暗透明" ></a></div></code>

代码注释:

filter 设置平台IE半透明效果样式,值1-100,值越小越透明,设置IE8以前的透明使用

opacity 设置IE半透明效果样式,值0.1-1,值越小越透明,设置IE8以后版本的透明使用

-moz-opacity 对非IE浏览器设置,比如火狐,语法与IE相同。

完整实例:

<code class="language-html"> 
 
 
<title></title> 
<style>
.div1,.div2{ width:500px; margin:20px auto} 
.div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8} 
.div2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7} 
</style>
 
 
<p>css 鼠标经过图片,图片变色变暗透明</p> 
<div class="div1"><a href="#"><img  src="/Public/images/logo.gif" alt="css 鼠标经过图片,图片变色变暗透明" ></a></div> 
<div class="div2"><a href="#"><img  src="/Public/images/logo.gif" alt="css 鼠标经过图片,图片变色变暗透明" ></a></div>
 
</code>

在线运行

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn