本文介绍了如何使用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更改悬停时图像的不透明度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-14 09:30