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

WBOY
Freigeben: 2016-06-01 09:53:20
Original
6278 Leute haben es durchsucht

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>
Nach dem Login kopieren

这里设置了对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>
Nach dem Login kopieren

代码注释:

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>
Nach dem Login kopieren

在线运行

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage