Question

我想在图像处于禁用状态时更改图像的不透明度，就像我正在为下面的输入button做的那样：

input[type="button"]:disabled {
  border: 1px solid #AAA;
  border-radius: 4px;
  opacity:0.5;
}

img:disabled {
  opacity:0.5;
}

Normal button: <input type="button" value="Close" /><br>
Disabled button: <input type="button" value="Cancel" disabled="true"/>
<br><br>
Normal: <img src="http://i.stack.imgur.com/AkfB4.png" /><br>
Disabled: <img src="http://i.stack.imgur.com/AkfB4.png" style="opacity:0.5" disbled />

但是，如果我在css中添加:disabled，它就无法用于图像。请帮我搞定。

Answer 1

As stated by W3C：

如果一个元素落入其中一个元素，则该元素实际上被禁用   以下类别：


已停用的按钮元素

已停用的输入元素

选择已停用的元素

已禁用的textarea元素

具有已禁用属性的optgroup元素

已停用的选项元素

具有已禁用属性的字段集元素


注意：此定义用于确定哪些元素可以聚焦以及哪些元素与：disabled伪类匹配。

因此，您不应该将:disabled用于图片。你应该找到其他方法。

最好的可能是使用类型属性为input的{{1}}代码。

这种方式可以使用image属性：

disabled

input[type=image]:disabled
{
    opacity:0.5;
}

如果您不想在单击表单时提交表单，则应将<input type="image" src="http://i.stack.imgur.com/AkfB4.png" border="0" disabled />添加到onclick="return false;"标记。

另一种可能性as mentioned by @DevonBernard是添加一个禁用的类，并使用CSS来获得不透明度。

input

img.disabled
{
    opacity:0.5;
}

如果您确实想使用<img src="http://i.stack.imgur.com/AkfB4.png" alt="Image" class="disabled">属性（即使您不应该使用），另一种可能性是使用属性选择器：

disabled

img[disabled]
{
    opacity:0.5;
}

这不是正确的方法，因为首先不应在图像上使用<img src="http://i.stack.imgur.com/AkfB4.png" alt="Image" disabled>属性。也有些浏览器可能不支持此功能（现在或将来）。

Answer 2

CSS3：禁用选择器通常用于表单元素（复选框，按钮等），因此如果要在img上应用不透明度，则应使用：

img.disabled
{
    opacity:0.5;
}

所以它是关于CSS类的。我不认为我知道什么可以＆＃34;禁用状态＆＃34;实际上，在图像上意味着，也许只是在您点击后的图像状态，但即使在这种情况下，您也无法使用＆＃34;禁用＆＃34;选择器。

Answer 3

你也可以使用CSS选择器来禁用＆＃34;禁用＆＃34;州，在我的情况下工作正常：

button[disabled] > img {
    opacity: 0.5;
}

最佳

曼努埃尔

如何在css中改变图像禁用状态下的不透明度

3 个答案: