Heim  >  Artikel  >  Web-Frontend  >  css 鼠标经过图片,图片变色变暗透明

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

WBOY
WBOYOriginal
2016-06-01 09:53:206267Durchsuche

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>

在线运行

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:CSS DIV 固定宽度居中的方法Nächster Artikel:CSS div宽度自适应