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

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元素
• 禁用的选项元素
• 具有禁用属性的fieldset元素

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

所以，你不应该使用:disabled图像。你应该找到其他方法。

最好的可能性是使用类型属性为input的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;"添加到input标记中。

---

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

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>

这不是正确的方法，因为disabled属性不应该首先用于图像。也有些浏览器可能不支持此功能（现在或将来）。

Answer 2

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

img.disabled
{
    opacity:0.5;
}

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

Answer 3

您还可以将CSS选择器用于“禁用”状态，在我的情况下可以正常工作：

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

最好的曼努埃尔