最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

CSS滤镜在图片链接时的应用

CSS rockyxia 6954浏览 0评论

我们经常在网上看到一些图片鼠标放上去就感觉变色了,但是这个图片还是原来的图片,并没有变换图片,其实这就是使用了滤镜的功能!滤镜是css中常用的功能,图片在网页中配合css滤镜可以做出很好看的效果!

今天我自己也尝试着做了一个小测试,代码页很简单,我先把代码放上来吧!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>滤镜在图片链接时的应用</title>  
<style type="text/css">  
body { background:#930F1C}   
img { border:none;}   
a:link img,a:visited img {   
    filter: alpha(opacity=86); /*ie*/   
    opacity:0.86; /*ff*/      
}   
a:hover img {   
    filter: alpha(opacity=100); /*ie*/   
    opacity:1 /*ff*/      
}   
</style>  
</head>  
  
<body>  
<a href="#"><img src="main_series_been.jpg" /></a><br /><br />  
<a href="#"><img src="main_series_chil.jpg" /></a><br /><br />  
<a href="#"><img src="main_series_lafu.jpg" /></a>  
</body>  
</html> 

大家直接把代码复制过去更换一下图片路径即可!但是在测试过程中有几点需要注意的地方我再强调一下:

1、整个网页的背景或者说是图片周围的背景,这里最好使用较深的颜色,否则很难看到什么效果。我开始的时候就是使用默认的白色作为背景的,但是一直好像看不到什么效果一样,最后修改了一下背景颜色,才看出了清晰的效果!

2、注意浏览器的兼容性问题,大家在代码中应该看到了,每个都写了两个代码,应为火狐和ie下css样式写法是不同的,我这里只测试了ie和火狐,若大家发现在其他浏览器下不正常的话,请大家自己再补充全css的兼容性!

转载请注明:Rockyxia Web技术博客 » CSS滤镜在图片链接时的应用
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)