本文介绍了如何使用css更改悬停时图像的不透明度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图找出如何将所有图像设置为初始为50%不透明度,然后在悬停时将不透明度设置为100%
Im trying to figure out how to set all images to be say 50% opacity initially, and then change to 100% opacity on hover
我尝试设置此规则在CSS文件中,但它不起作用。我给出了一个解析错误:
I tried setting this rule in the css file but it does not work. I gives a parse error:
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100);
}
推荐答案
您的代码经过验证在这只小鱼身上带着一条友善的鱼:
Your code is good- verified in this Fiddle with a friendly fish: http://jsfiddle.net/Qrufy/
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" />
img {
opacity: 0.5;
filter: alpha(opacity=40);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
不透明度
属性适用于所有现代浏览器,以及过滤器:alpha
涵盖< = IE8。
The opacity
property works in all modern browsers, and the filter:alpha
covers <= IE8.
这篇关于如何使用css更改悬停时图像的不透明度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!