如何使用css更改悬停时图像的不透明度 [英] How to change the opacity of image on hover using 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); 
}

推荐答案

您的代码经过验证在这只小鱼身上带着一条友善的鱼： http://jsfiddle.net/Qrufy/

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